行政院環境保護署－謝茵安

ray 環境保護署
, ,
#1

網站

行政院環境保護署

姓名

謝茵安

檢測日期

2018-04-02

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本：Chrome 65.0.3325.181)

解析度（手機螢幕）

螢幕解析度 360X640

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

是

壞掉的連結

1.原本的圖片連結失效，留下一個超大三角形。（多個頁面皆有此問題）解法回文連結
首頁>影音專區
首頁>本署位置圖>毒品及化學物質局
image

跑版（影響閱讀）問題

1.附件圖示變形（多個頁面皆有此問題）解法回文連結
原本小小的附件示意圖，到了手機網站會大到整個佔滿版面，而且還是超級糊的示意圖。很醜，也很沒必要。
而模擬器點出來結果和手機不太一樣。手機會跳這個超大模糊圖，模擬器則會另開一個全新視窗。
首頁 > 最新消息 > 107年度補(捐)助環境教育機構辦理環境教育人員訓練(研習)計畫申請(修訂)
首頁 > 最新消息 > 洗錢防制，國家向前

  • 手機版：
    image
  • 模擬器：
    image

2.地圖超出介面（多個頁面皆有此問題）解法回文連結
首頁 > 關於環保署 > 本署位置圖 > 毒品及化學物質局
首頁 > 關於環保署 > 本署位置圖 > 第二辦公室位置圖
image

3.圖片被嚴重壓縮（多個頁面皆有此問題）解法回文連結
首頁 >本署APP專區>環境即時通
首頁 >本署APP專區>Eco life 髒亂剋星
image

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

無

出現亂碼

無

不能用的外掛程式（Flash、ActiveX、Applet、Silverlight、…）

無

網站載入緩慢（相對一般網站）

無

閱讀模式

Android系統

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

無

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

1.該網站的手機版介面整體給人一種九零年代的過時風，而且很多地方都讓人覺得它好像很久沒更新，不但使用觀感不佳，很多地方使用也不方便，建議更新手機版網站。
2.風格簡單，配色用綠色符合環保署給人的感覺。字體偏大，也許會適合年長者操作。
2.不少政策字太多，雖然政府網站政策大多都是複製貼上的，但有些製作良好的網站會斟酌字的數量。但環保署手機版的政策內容點進去一看，全都是字，讓人沒有閱讀慾望，建議改進。
4.多餘介面。
點進去該介面，結果什麼資訊都沒放，讓此介面感覺很多餘。
首頁 > 環境政策 > 重大政策
image

#2

問題

可能原因

這個是設計上的問題，圖片只能請單位提供更高清的圖

#3

問題

可能原因

寬度寫死

原始程式

位置: https://www.epa.gov.tw/ct.asp?xItem=58223&ctNode=30631&mp=epa:278

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.1174864562286!2d121.54190985085614!3d25.030086683895536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442aa2cea78cf51%3A0x5de1b994f0b6e9e!2z6KGM5pS_6Zmi55Kw5aKD5L-d6K23572y5q-S54mp5Y-K5YyW5a2454mp6LOq5bGA!5e0!3m2!1szh-TW!2stw!4v1482892209016"  frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" title="位置圖" width="550"></iframe>

建議修改

將寬度改成100%

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.1174864562286!2d121.54190985085614!3d25.030086683895536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442aa2cea78cf51%3A0x5de1b994f0b6e9e!2z6KGM5pS_6Zmi55Kw5aKD5L-d6K23572y5q-S54mp5Y-K5YyW5a2454mp6LOq5bGA!5e0!3m2!1szh-TW!2stw!4v1482892209016"  frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" title="位置圖" width="100%"></iframe>

補充

57

#4

問題

可能原因

table排版 + 圖片固定大小

原始程式

位置：https://www.epa.gov.tw/ct.asp?xItem=29172&ctNode=33321&mp=epamob ：89

<table width="200" border="1">
  <tr>
    <td><p><IMG alt="環境即時通APP使用畫面 圖1" src="/public/MMO/epa/envi_mg01.png" width="250" height="376"></p>
    <p><img alt="環境即時通APP使用畫面 圖2" src="/public/MMO/epa/envi_mg02.png" width="250" height="376"></p></td>
    <td><p><span class="style1">環境即時通(2.0)</span><br><BR></p>
      <DIV align="left">
        <p>為了讓民眾即時掌握環境資訊，提前做好防護準備，新版環境即時通，新增許多便利功能，讓民眾可以隨時檢視各項環境指標。<br>
            
          環境即時通除了提供使用者即刻所在地、其他常用位置的即時環境資訊與氣象外，同時新增預報和警示推播功能，針對各種環境指標給予一般民眾和敏感性族群適時的外出建議。<br>
            
          主要的環境指標包含：細懸浮微粒PM2.5、空氣污染PSI、紫外線UVI和河川汙染RPI等，以儀表板呈現最新資訊，並可以快速切換不同地點，民眾可新增住家、公司或出外地點同時查看。其中PM2.5和PSI指標也附有未來兩日的預報，民眾可以提前規劃準備，也可查看歷史資料趨勢圖，了解過往的空氣品質變化。<br>
            
          目前全臺各空氣品質區設有數個監測站，民眾可以透過地圖展示，觀看各空品區、縣市、監測站的各項環境指標即時觀測值，還可以查詢當天各項數值最高至最低的地區。<br>
            
        環境即時通將隨時新增環保署的最新訊息及警特報，並提供警示推播通知，民眾可以設定各項指標的警示標準，當指標數值到達設定的警示門檻時，系統將主動推播告知，讓民眾提高環境意識，即時掌握環境資訊，做好健康保健的防護措施。
      </p>
        </DIV>
      <table width="200" border="1" class="txt">
        <tr>
          <td><A href="https://play.google.com/store/apps/details?id=com.esri.arcgis.android.idt.EPA.HL&feature=search_result#?t=W251bGwsMSwyLDEsImNvbS5lc3JpLmFyY2dpcy5hbmRyb2lkLmlkdC" target="_blank"><IMG border="0" alt="另開新視窗至Google Play 環境即時通 QR Code" src="/public/MMO/epa/04_G_EMSG.gif" width="128" height="157"></A></td>
          <td><A href="https://itunes.apple.com/tw/app/huan-jing-ji-shi-tong/id585493633?l=zh&mt=8" target="_blank" ><IMG border="0" alt="另開新視窗至Apple Store 環境即時通 QR Code" src="/public/MMO/epa/04_A_EMSG.gif" width="128" height="157"></A></td>
        </tr>
        <tr>
          <td><A href="https://play.google.com/store/apps/details?id=com.esri.arcgis.android.idt.EPA.HL&feature=search_result#?t=W251bGwsMSwyLDEsImNvbS5lc3JpLmFyY2dpcy5hbmRyb2lkLmlkdC" target="_blank"><IMG border="0" alt="Google Play 環境即時通" src="/public/MMO/epa/googleplay_1.jpg" width="128"></A></td>
          <td><A href="https://itunes.apple.com/tw/app/huan-jing-ji-shi-tong/id585493633?l=zh&mt=8" target="_blank"><IMG border="0" alt="Apple Store 環境即時通" src="/public/MMO/epa/appstore_1.jpg" width="128"></A></td>
        </tr>
      </table>
      <p> </p>
      <p><A href="https://play.google.com/store/apps/details?id=tw.com.textar.android.taiwanuvi&feature=search_result#?t=W251bGwsMSwxLDEsInR3LmNvbS50ZXh0YXIuYW5kcm9pZC50YWl3YW51dmkiXQ.." target="_blank"></A><A href="https://itunes.apple.com/tw/app/tai-wan-zi-wai-xian/id553766920?l=zh&mt=8" target="_blank"></A><br>
    <A href="https://play.google.com/store/apps/details?id=tw.com.textar.android.taiwanuvi&feature=search_result#?t=W251bGwsMSwxLDEsInR3LmNvbS50ZXh0YXIuYW5kcm9pZC50YWl3YW51dmkiXQ.." target="_blank"></A><A href="https://itunes.apple.com/tw/app/tai-wan-zi-wai-xian/id553766920?l=zh&mt=8" target="_blank"></A></p></td>
  </tr>
</table>

建議修改

把table 改 flex（如果有像bootstrap之類的grid排版也可以採用）

<div style="display: inline-flex; flex-warp: warp">
  <div width="40%">
    <div width="100%">
      <img alt="環境即時通APP使用畫面 圖1" src="/public/MMO/epa/envi_mg01.png" width="80%" height="80%">
    </div>
    <div width="100%">
      <img alt="環境即時通APP使用畫面 圖2" src="/public/MMO/epa/envi_mg02.png" width="80%" height="80%">
    </div>
  </div>
  <div width="60%">
    <div width="100%">
      <p><span class="style1">環境即時通(2.0)</span><br><br></p>
    </div>
    <div width="100%">
      <div align="left">
        <p>為了讓民眾即時掌握環境資訊，提前做好防護準備，新版環境即時通，新增許多便利功能，讓民眾可以隨時檢視各項環境指標。<br>
            
          環境即時通除了提供使用者即刻所在地、其他常用位置的即時環境資訊與氣象外，同時新增預報和警示推播功能，針對各種環境指標給予一般民眾和敏感性族群適時的外出建議。<br>
            
          主要的環境指標包含：細懸浮微粒PM2.5、空氣污染PSI、紫外線UVI和河川汙染RPI等，以儀表板呈現最新資訊，並可以快速切換不同地點，民眾可新增住家、公司或出外地點同時查看。其中PM2.5和PSI指標也附有未來兩日的預報，民眾可以提前規劃準備，也可查看歷史資料趨勢圖，了解過往的空氣品質變化。<br>
            
          目前全臺各空氣品質區設有數個監測站，民眾可以透過地圖展示，觀看各空品區、縣市、監測站的各項環境指標即時觀測值，還可以查詢當天各項數值最高至最低的地區。<br>
            
        環境即時通將隨時新增環保署的最新訊息及警特報，並提供警示推播通知，民眾可以設定各項指標的警示標準，當指標數值到達設定的警示門檻時，系統將主動推播告知，讓民眾提高環境意識，即時掌握環境資訊，做好健康保健的防護措施。
      </p>
      </div>
    </div>
  </div>
  <div width="100%">
    <table class="txt" width="200" border="1">
        <tbody><tr>
          <td><a href="https://play.google.com/store/apps/details?id=com.esri.arcgis.android.idt.EPA.HL&amp;feature=search_result#?t=W251bGwsMSwyLDEsImNvbS5lc3JpLmFyY2dpcy5hbmRyb2lkLmlkdC" target="_blank"><img alt="另開新視窗至Google Play 環境即時通 QR Code" src="/public/MMO/epa/04_G_EMSG.gif" width="128" height="157" border="0"></a></td>
          <td><a href="https://itunes.apple.com/tw/app/huan-jing-ji-shi-tong/id585493633?l=zh&amp;mt=8" target="_blank"><img alt="另開新視窗至Apple Store 環境即時通 QR Code" src="/public/MMO/epa/04_A_EMSG.gif" width="128" height="157" border="0"></a></td>
        </tr>
        <tr>
          <td><a href="https://play.google.com/store/apps/details?id=com.esri.arcgis.android.idt.EPA.HL&amp;feature=search_result#?t=W251bGwsMSwyLDEsImNvbS5lc3JpLmFyY2dpcy5hbmRyb2lkLmlkdC" target="_blank"><img alt="Google Play 環境即時通" src="/public/MMO/epa/googleplay_1.jpg" width="128" border="0"></a></td>
          <td><a href="https://itunes.apple.com/tw/app/huan-jing-ji-shi-tong/id585493633?l=zh&amp;mt=8" target="_blank"><img alt="Apple Store 環境即時通" src="/public/MMO/epa/appstore_1.jpg" width="128" border="0"></a></td>
        </tr>
      </tbody></table>
      <p> </p>
      <p><a href="https://play.google.com/store/apps/details?id=tw.com.textar.android.taiwanuvi&amp;feature=search_result#?t=W251bGwsMSwxLDEsInR3LmNvbS50ZXh0YXIuYW5kcm9pZC50YWl3YW51dmkiXQ.." target="_blank"></a><a href="https://itunes.apple.com/tw/app/tai-wan-zi-wai-xian/id553766920?l=zh&amp;mt=8" target="_blank"></a><br>
    <a href="https://play.google.com/store/apps/details?id=tw.com.textar.android.taiwanuvi&amp;feature=search_result#?t=W251bGwsMSwxLDEsInR3LmNvbS50ZXh0YXIuYW5kcm9pZC50YWl3YW51dmkiXQ.." target="_blank"></a><a href="https://itunes.apple.com/tw/app/tai-wan-zi-wai-xian/id553766920?l=zh&amp;mt=8" target="_blank"></a></p>
  

  </div>
</div>
#5

問題

可能原因

假裝有做RWD但是最一開始把長寬固定，所以有做等於沒做

原始程式

位置：https://www.epa.gov.tw/ct.asp?xItem=58223&ctNode=32295&mp=epamob ：70

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.1174864562286!2d121.54190985085614!3d25.030086683895536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442aa2cea78cf51%3A0x5de1b994f0b6e9e!2z6KGM5pS_6Zmi55Kw5aKD5L-d6K23572y5q-S54mp5Y-K5YyW5a2454mp6LOq5bGA!5e0!3m2!1szh-TW!2stw!4v1482892209016"  frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" title="位置圖" width="550"></iframe>

建議修改

把height=“500” width="550"這樣的神奇數字改成大家都可以用的100%

...width="100%" height="100%"...

補充

圖片