行政院環境保護署-柯宥辰

網站

行政院環保署

姓名

柯宥辰

檢測日期

2018-04-02

檢測裝置

i6

作業系統 與 瀏覽器版本

ios 10.12.6

解析度(手機螢幕)

375*667 pixels

是否會自動跳入行動版欄位?

壞掉的連結

跑版(影響閱讀)問題

以下皆圖片被拉長:
解法回文連結
[首頁>App專區>環境即時通]:(圖一)
[首頁>App專區>EcoLife髒亂剋星]:
[首頁>App專區>公害報報]:
(圖一)


以下皆地圖超出頁面(本署位置圖再往下點進去一層的所有google map都超越頁面):
解法回文連結
[首頁>本署位置圖> 第二辦公室位置圖]:(範例圖)
[首頁>本署位置圖> 毒物及化學物質局]:
[首頁>本署位置圖> 環保署位置圖]:
[首頁>本署位置圖> 環境檢驗所位置圖]:
[首頁>本署位置圖> 環保人員訓練所位置圖]:
[首頁>本署位置圖> 環境督察總隊位置圖]:
[首頁>本署位置圖> 北區環境督察大隊位置圖]:
[首頁>本署位置圖> 中區督察大隊位置圖]:
[首頁>本署位置圖> 南區環境督察大隊位置圖]:
(範例圖)


[首頁>署長信箱]:(圖一)
右邊大量留白+字被圖擋住
(圖一)
解法回文連結


以下皆文字跑版:

[首頁>署長信箱]:(圖一)
解法回文連結
[首頁>署長信箱>go !write a letter]:(圖二)
解法回文連結

(圖一)
(圖二)


無法操作的網頁元素(如按鈕不能按、選單不能選等)

出現亂碼

不能用的外掛程式(Flash、ActiveX、Applet、Silverlight、…)

網站載入緩慢(相對一般網站)

閱讀模式

可以用

其他(無法判斷屬於以上那個分類的都放在這邊)

[首頁>最新消息>106年12月12日國營事業空污改善聚焦座談會]:
多一個雙圈
(圖一)


*以下皆電話號碼不見了(招標資訊每個點進去最下面的電話/傳真號碼會消失–>是全部喔~~~不只下面列出來的):
[首頁>招標資訊>107C013-行政院環境保護署暨直轄市及縣(市)(政府)環境保護局因應天然災害緊急租用車輛機具供應契約]:(範例圖)
[首頁>招標資訊>107A203-環境倫理教育推廣專案工作計畫]:
(範例圖)

對此網站建議(非程式問題皆放置這裡)

[首頁>環保業務>大氣]:
下面點進去都沒有手機版

問題:

可能原因:

iframe的寬度屬性設定錯誤,未跟著行動載具螢幕大小改變

原始程式:

Xpath:/html/body/div/section/div[2]/p/iframe

<iframe title="位置圖" width="550" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.tw/maps?f=q&amp;source=s_q&amp;hl=zh-TW&amp;geocode=&amp;q=%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F14%E6%A8%93&amp;aq=&amp;sll=25.040125,121.50777&amp;sspn=0.004501,0.006856&amp;vpsrc=6&amp;brcurrent=3,0x3442a8de05b73b09:0x64e4cd4874161dde,0,0x345d5538b0b6645f:0x5aa90dfa6620edc0&amp;ie=UTF8&amp;hq=&amp;hnear=100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F&amp;ll=25.043576,121.50925&amp;spn=0.00486,0.00589&amp;z=17&amp;output=embed"></iframe>

建議修改:

修改插入地圖的iframe中的長寬寫法,移除寬度,對應螢幕將長度下修為300px,如下:

<iframe title="位置圖"  height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.tw/maps?f=q&amp;source=s_q&amp;hl=zh-TW&amp;geocode=&amp;q=%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F14%E6%A8%93&amp;aq=&amp;sll=25.040125,121.50777&amp;sspn=0.004501,0.006856&amp;vpsrc=6&amp;brcurrent=3,0x3442a8de05b73b09:0x64e4cd4874161dde,0,0x345d5538b0b6645f:0x5aa90dfa6620edc0&amp;ie=UTF8&amp;hq=&amp;hnear=100%E5%8F%B0%E5%8C%97%E5%B8%82%E4%B8%AD%E6%AD%A3%E5%8D%80%E7%A7%80%E5%B1%B1%E8%A1%974%E8%99%9F&amp;ll=25.043576,121.50925&amp;spn=0.00486,0.00589&amp;z=17&amp;output=embed"></iframe>

補充

結尾(選填,可增加網站建議)

問題:

可能原因:

圖片的寬長度設定問題

原始程式:

Xpaht:/html/body/div/section/div[2]/table/tbody/tr/td[1]/p[1]/img

<img alt="環境即時通APP使用畫面 圖2" src="/public/MMO/epa/envi_mg02.png" width="250" height="376">

建議修改:

移除長寬設定,恢復原圖大小

<img alt="環境即時通APP使用畫面 圖2" src="/public/MMO/epa/envi_mg02.png">

補充

結尾(選填,可增加網站建議)

但此頁面還有版面問題,修正完圖片後依然看得不清楚,建議重新設計

問題:

可能原因:

檢查後兩個問題
1.diz的z軸順序顛倒,導致被前面div擋住
2.選單未加背景

原始程式:

Xpath://*[@id=“main-navbar-collapse”]

<div class="navbar-collapse collapse" id="main-navbar-collapse" style="margin-left: 100px; width: 80%; height: 21.000009536743164px;" aria-expanded="false">
            .......
            .....
        </div>

建議修改:

增加z-index:1

<div class="navbar-collapse collapse" id="main-navbar-collapse" style="margin-left: 100px; width: 80%; z-index: 1; height: 21.000009536743164px;" aria-expanded="false">
            .......
            .....
        </div>

另外要加上背景顏色
Xpath://*[@id=“menutable”]

<div id="menutable" style="
background: white">
           .....
           ....
          </div>

補充

不確定是否符合原設定,這邊只解決選單擋住問題

結尾(選填,可增加網站建議)

問題:

可能原因:

字體過大

原始程式:

位置:https://epamail.epa.gov.tw/Front/Content/css/custom/_home-card.scss:171

> span {
            padding-left: 24px;
            padding-right: 36px;
            font-size: 24px;
            color: #474F5C;
        }

建議修改:

修改174行的字體大笑

> span {
            padding-left: 24px;
            padding-right: 36px;
            font-size: 20px;
            color: #474F5C;
        }

補充

修改20就可以

結尾(選填,可增加網站建議)

問題:

可能原因:

文字置中

原始程式:

位置:https://epamail.epa.gov.tw/Front/Content/css/bootstrap/_type.scss:98

// Alignment
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }
.text-nowrap         { white-space: nowrap; }

建議修改:

修改101行的文字置左

// Alignment
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: left; }
.text-justify        { text-align: justify; }
.text-nowrap         { white-space: nowrap; }

補充

結尾(選填,可增加網站建議)