網站

標準檢驗局

姓名

高偉庭

檢測日期

2018-04-20

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本：Chrome 64.0.3325.109

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

1. 首頁＞影音專區＞相片欣賞
   首頁＞台北總局＞重大政策＞經濟部重大政策
   連到經濟部的網站但是似乎壞掉了(解法回文連結)
2. 首頁＞花蓮分局＞公告
   
   顯示此節點未開放解法回文連結
3. 首頁＞台南分局＞展示室
   網頁一直跑不出來解法回文連結

跑版（影響閱讀）問題

1. 首頁＞台北總局＞服務窗口＞業務申辦
   首頁＞台北總局>便民服務＞服務項目
   首頁＞台北總局>便民服務＞相關單位電話及地址＞相關單位電話
   表格顯示不全解法回文連結
   

2. 首頁＞台北總局＞法規服務＞標準法規（裡面的每一項）
   首頁＞台北總局＞法規服務＞商品檢驗法規（裡面的每一項）
   首頁＞台北總局＞法規服務＞其他法規（裡面的每一項）
   有一些標題很大但內文很小，有一些全部字都很小，醜死ㄌ（btw這些應該不是手機版網站？）解法回文連結
   
   

3. 首頁＞台北總局＞法規服務＞度量衡法規＞膜式氣量計型式認證技術規範第3版（只要有表格的）
   表格裡的字大小不一很難讀
   

4. 首頁＞台北總局＞法規服務＞法規查詢>法規內容查詢
   首頁＞台北總局＞法規服務＞法規查詢>歷史法規區
   搜尋欄位顯示不全
   

5. 首頁＞台北總局＞法規服務＞法規查詢>法令解釋和實質法規命令查詢
   排版跑掉解法同上
   

6. 首頁＞台北總局＞影音專區＞影片欣賞（裡面每一項）
   內插的youtube影片顯示不全解法回文連結
   

7. 首頁＞基隆分局＞活動訊息（裡面每一項）
   首頁＞基隆分局＞政令宣導＞消除歧視性別平等
   首頁＞新竹分局＞活動快訊(裡面有圖片的的分頁)
   圖片顯示不全解法同上
   

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

1. 首頁＞台北總局(每個分局的頁驗都有這個問題)
   往下拉，點按任何一個分頁進去（e.g. 單一窗口）後跳轉的那個頁面，左右上角的反回與回首頁按紐都不能點。而且在台北總局首頁左上的漢堡也不見了，很麻煩解法同上
   
2. 首頁＞新竹分局＞下載專區
   無法點按解法回文連結

出現亂碼

無

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

無

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

無

閱讀模式

不適用

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

1. 首頁>資訊公開個資檔案資訊
   首頁>標準與正字標記>國家標準編修資訊
   首頁＞台北總局＞重大政策＞施政計畫
   首頁＞高雄分局＞居家商品安檢
   首頁＞高雄分局＞商品安全學堂
   首頁＞高雄分局＞安全商品採購講習
   首頁＞高雄分局＞水產品鱻聯盟
   首頁＞高雄分局＞鋼鐵產品鑫聯盟
   沒有手機版網頁
2. 首頁>台北總局(其他每個分局都一樣)的左側漢堡
   漢堡點開後的上方顯示標題項目，有點像是沒做完的感覺
   

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

1. 首頁＞台北總局
   明明點入的是台北總局，但是最上方顯示的都是經濟部標準檢驗局，這樣蠻怪的，我覺得應該標上台北總局比較好
2. 點進各總局、分局的網頁，分成首頁往下滑的選單、與左上漢堡兩處選單，蠻混亂的
3. 整體手機版的架構很怪，雖然一開始先分成各個分局點按，但是各分局點入首頁往下滑的資料都一模一樣，各分局左上漢堡按開資訊也大同小意。建議可以直接做成一個總網站就好，如果有各分局各自的活動訊息、新聞，再在總網站下的活動訊息與新聞欄位分開放。另外，很明顯的手機版網頁與電腦版網頁有資訊落差，除了排版、項目差很多之外，某些資訊的頁面也只有網頁版。

問題

可能原因

如上圖，multimenu.js這個檔案載入失敗，請先檢查一下檔案狀態
其次是jquery版本可能太舊了，同時要用jquery的話其實也不用下載到自己的資料夾，可以用CDN服務就好

原始程式

位置：經濟部標準檢驗局 : 13

<script type="text/javascript" src="xslgip/mobileHL/js/jquery-1.9.1.min.js"></script>

建議修改

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  crossorigin="anonymous"></script>

問題

可能原因

這是原本應該去的連結網址
從網指名猜測應該是開了8080這個port
可以看一下你們家網頁後端8080 port有沒有出事嗎？

問題

可能原因 ＆ 建議修改

我這邊看雖然表格雖然需要左右滑動才可以看完，但是至少不會影響資料顯示
如果真的要改的話，比較快的方法應該是使用bootstrap的table-responsive
當然其實還是不推薦使用table，這種排版方式對RWD手機排版非常不友好，如果可以還是建議使用display: flex; 或是 display: grid;等css語法

問題

可能原因 & 建議修改

這篇是圖片太擠的解法，把img tag換成p tag，基本上就是改成grid排版，不然這種排版問題其實也沒救，最多每段文字加一段空間區隔，看要用div還是最直接的br

問題

可能原因

明明youtube內容都用百分比當單位了，最外面的iframe一旦用了px就什麼都沒有了

原始程式

位置：https://www.bsmi.gov.tw/wSite/ct?xItem=58211&ctNode=4627&mp=86 : 45

<p><IFRAME title="104年行動電源短片 40秒版" height=315 src="https://www.youtube.com/embed/AnFkWkVXUOg" frameBorder=0 width=560 allowfullscreen></IFRAME><BR><BR>影片字幕:<BR>為什麼<BR>你的行動電源有商品檢驗標識嗎<BR>商品檢驗標識<BR ......

建議修改

自適應的iframe這邊有兩種解法

<!--script這邊要放在head tag 裡面-->
<script type="text/javascript">
function SetCwinHeight()
{
var iframeid=document.getElementById("iframe01"); //iframe id
  if (document.getElementById)
  {  
   if (iframeid && !window.opera)
   {  
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight)
     {  
       iframeid.height = iframeid.contentDocument.body.offsetHeight;  
     }else if(iframeid.Document && iframeid.Document.body.scrollHeight)
     {  
       iframeid.height = iframeid.Document.body.scrollHeight;  
      }  
    }
   }
}
</script>


<!--這邊則是放在body對應原本iframe的位置-->
<IFRAME id="iframe01" title="104年行動電源短片 40秒版" height=315 src="https://www.youtube.com/embed/AnFkWkVXUOg" frameBorder=0 width=100% allowfullscreen></IFRAME> ......

問題

可能原因

位置：view-source:https://www.bsmi.gov.tw/wSite/mp?mp=88 : 44

<a href="#" class="menupic menu_icon06">
									下載專區
								</a>

這是假連結…