衛生福利部國民健康署肥胖防治網站-黃子菡

網站

衛生福利部國民健康署肥胖防治網站

姓名

黃子菡

檢測日期

2018-5-20

檢測裝置

iPhone X
MacBook Pro (Retina, 13-inch, Early 2015)

作業系統 與 瀏覽器版本

iOS 11.3/ Safari 11.3
macOS 10.13.4 Beta/ Chrome 65.0.3325.181

解析度(手機螢幕)

375 x 812 pixels

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

壞掉的連結


跑版(影響閱讀)問題 解法回文

  1. 首頁 > 聰明吃 > 正確飲食觀 > 每日飲食建議量:超出版面(圖1)(圖2)
  2. 首頁 > 聰明吃 > 營養小常識 > 熱量來源(圖3)
  3. 首頁 > 快樂動 > 運動量計算:跑出版面(圖4)
  4. 首頁 > 快樂動 > 運動生活化 > 生活化運動:巨無霸跳繩遮蔽視線(圖5)
    5.首頁 > 快樂動 > 運動生活化:超出版面(圖6)
  5. 首頁 > 快樂動 > 健康體適能:皆超出版面(圖7)
  6. 首頁 > 天天量體重 > 健康體重 > 體重過重或肥胖對健康的影響、體重過輕對健康的影響:超出版面、圖示遮蔽(圖8)(圖9)
  7. 首頁 > 健康體重管理諮詢專線:超出版面(圖10)

(圖1)

(圖2)

(圖3)

(圖4)

(圖5)

(圖6)

(圖7)

(圖8)

(圖9)

(圖10)


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

  1. 首頁導覽列無法點擊(圖11)
  2. 首頁 > 聰明吃 > 減糖專區 > 高糖食品熱量、糖量一覽表(圖12)
  3. 首頁 > 快樂動 > 一分鐘看懂快樂動網站資源:一分鐘打不開所有鏈結(圖13)
  4. 首頁 > 快樂動 > 運動好所在:連結無效(圖14)
  5. 首頁 > 快樂動 > 運動生活化 > 範例:連結無效(圖15)
  6. 首頁 > 快樂動 > 運動手冊及影片:連結皆失效(圖16)
  7. 首頁 > 資源下載 > 影音專區:健康操15分鐘單人教學版中文、10 Minute Individual Instruction conference use、10分鐘上班族身心健康操、15 Minute Individual Instruction、健康操10分鐘雙人教學版中文 會議使用等,縮圖為真人的五部都沒內容(圖17)

(圖11)

(圖12)

(圖13)

(圖14)

(圖15)

(圖16)

(圖17)

出現亂碼

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

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

閱讀模式

部分可以用

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

  1. 首頁 > 聰明吃 > 資源下載 > 每日飲食指南海報_使用請勿修改文字內容並加註資料來源為國民健康署:手機一直跑無法下載,電腦版為顯示 AI 檔。另外,著作權可以直接標明 CC(圖18)

(圖19)

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

  1. 資料有點零碎

問題:

建議解法:

總結來說,圖片的話寬高改成

{
  width: 100%;
  height: auto;
}

表格:RWD的CSS對於表格完全沒做處理,也不應該在一開始就寫死寬度,也建議別使用table,可以改用別的方式實作RWD,在這邊我用最不好的方式以解決目前跑板問題,希望能改變寫法
overflow: scroll
圖5的巨大圖是,在手機版時將position: absolute;拿掉就可以不擋住東西了

補充: