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

網站

行政院環境保護署

姓名

謝茵安

檢測日期

2018-04-02

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本:Chrome 65.0.3325.181)

解析度(手機螢幕)

螢幕解析度 360X640

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

壞掉的連結

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


跑版(影響閱讀)問題

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


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


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


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

出現亂碼

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

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

閱讀模式

Android系統

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

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

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

問題

可能原因

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

問題

可能原因

寬度寫死

原始程式

位置: 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

問題

可能原因

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>

問題

可能原因

假裝有做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%"...

補充

圖片