科技部科技大觀園-高偉庭

網站

科技部科技大觀園

姓名

高偉庭

檢測日期

2018-05-03

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本:Chrome 64.0.3325.109

解析度(手機螢幕)

360x640 pixels

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

是,BUT手機搜尋科技大觀園時會自動跳出手機版網頁,但如果直接點表格中提供的網址就只會跑到網頁版

壞掉的連結

  1. 首頁>LIS線上教學
    點按的時候只會再跳到首頁
    2018-05-03_214844

跑版(影響閱讀)問題

  1. 首頁>新知報>科普點子王>青銀少共學
    首頁>新知報>科普人談科普>陳竹亭教授,從陳竹亭教授這篇到科普人黃福坤教授的每一篇都有這個問題
    內文插圖、影片無法顯示完全但可滑動解法回文連結
    2018-05-03_215508

  1. 首頁>文章>科普知識>促進東西文化科技交流的唐獎,科普知識、精選專題、文章導覽、突破的故事中有很多篇也有這個問題
    文字顯示不完全但可以滑動,應該是插圖失敗了?
    2018-05-03_220724

  1. 首頁>文章>科技瞭望>機器人新時代來臨
    網址顯示不全但可滑動解法回文連結
    2018-05-03_221558

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

出現亂碼

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

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

閱讀模式

不適用

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

  1. 點按右上的漢堡,選單會從左側出來,有點怪
    2018-05-03_215050
    2018-05-03_215058

  1. 文章首圖會被壓縮,比如說:首頁>新知報>創業第一桶金>Chasewind
    應該每篇文章的首圖都把大小寫死了
    2018-05-03_220216

  1. 首頁>新知報>驚奇新發現
    點入之後沒有顯示任何內容欸
    2018-05-03_220413

  1. 在科普知識、精選專題、文章導覽、突破的故事中,只要是文字顯示不完全的篇目,點按右側漢堡,最上方的欄就會整個變白消失
    首頁>文章>科普知識>促進東西文化科技交流的唐獎為例
    2018-05-03_222644

  1. 只要點擊下方這一塊,就算不是按跳到最top的按紐,也會跳到top解法回文連結
    2018-05-03_222900

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

  1. 電腦版與手機版內容相差蠻多的,有點可惜,建議還是要讓手機與網頁版內容都同步
  2. 整體排版都還不錯,只是需要檢查每篇文章首圖是否壓縮

問題

可能原因

其實其他網頁也有這種圖片太大大到要滾動的
不過其他網頁我覺得還好不過這個有點扯
因為這個超出去的圖片fixed width導致整個網頁框架跑出去
對於圖片要用fixed width表示問號

原始程式

位置:https://m.scitechvista.nat.gov.tw/c/9NiC.htm : 149

<div><img alt="" src="/Multimedia/upload/images/131643/P1020807.JPG" style="width: 600px; height: 338px;" /></div>

建議修改

<div><img alt="" src="/Multimedia/upload/images/131643/P1020807.JPG" style="width: 100%; height: 100%;" /></div>

補充

image
旁邊會有白邊是因為樓下還有一堆用fixed width的圖片

問題

建議修改

ol tag 加一個 word-break: break-all就好了

<ol style="
    word-break: break-all;
">

補充

image

問題

可能原因

image
它觸發scrollTop的class設定在外面的div而非icon本身
不過找不太到scrollTop的js所以不知道是哪個class(scrollToTop/ mbr-arrow-up)是關鍵,同時也不知道scrollTop的實做機制為何