水利署節約用水資訊網-劉佳慧

網站

節約用水資訊網

姓名

劉佳慧

檢測日期

2018-05-16

檢測裝置

ASUS_Z01KDA

作業系統 與 瀏覽器版本

Android 8.0.0
Chrome版本:Chrome 66.0.3359.158

解析度(手機螢幕)

螢幕解析度 360x640 pixels

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

壞掉的連結


跑版(影響閱讀)問題


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

出現亂碼

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

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

閱讀模式

使用Android無閱讀模式

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

  • 有些頁面沒有回到頂端按鈕,或者說是不見了

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

  • 網站載入有點慢
  • 放檔案的話檔案格式可多注意
  • 活動報名流程感覺操作起來蠻順的,可以看到報名人數很不錯

問題

可能原因

明明是雙版排版還是要用table排版嗎…這很明顯是在濫用table排版了
圖片/ 表格固定大小是主因

原始程式

位置:https://www.wcis.org.tw/Home/Home_4 : 161

                <td width="200" align="center" valign="top"><img src="/images/contents/h.jpg" width="176" height="200" /></td>

建議修改

<td width="40%" align="center" valign="top"><img src="/images/contents/h.jpg" width="100%" height="100%"></td>

補充

問題

可能原因

沒有發現go top按鈕

問題

可能原因

手機排版要做自適應,原本排版在桌機上還可以不過手機板無謂的留白太多
圖片試過調了一下大小效果不是很好
可能還是原本圖片要改(解析度也不高)

問題

可能原因

那個背景圖案是固定的,標題位置又是用padding調出來的,換到手機板不跑版才奇怪吧

建議修改

既然都是用padding硬調出來的,最簡單粗暴的就是@media做手機版padding
位置:

#waterContent ul.accordionPart li .water_title {
    background: url(../images/submenu3_bg.png) no-repeat 2px 5px;
    padding: 1px 5px 25px 65px;
    color: #8cb600;
    font-size: 20px;
    cursor: pointer;
}

補充

問題

可能原因

goTopButton被蓋掉

原始程式

<img id="goTopButton" style="z-index: 5; cursor: pointer; top: 685.833px; position: fixed; right: 10px; opacity: 0.8; display: none;" title="回到頂端" src="/images/gotop.png">

建議修改

<img id="goTopButton" style="z-index: 999; cursor: pointer; top: 685.833px; position: fixed; right: 10px; opacity: 0.8; display: none;" title="回到頂端" src="/images/gotop.png">

建議

有段計算位置的 JavaScript 影響到展開後的網頁效能 或許可以調整做法讓使用經驗變好