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

ray 經濟部
, ,
#1

網站

節約用水資訊網

姓名

劉佳慧

檢測日期

2018-05-16

檢測裝置

ASUS_Z01KDA

作業系統 與 瀏覽器版本

Android 8.0.0
Chrome版本：Chrome 66.0.3359.158

解析度（手機螢幕）

螢幕解析度 360x640 pixels

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

是

壞掉的連結

跑版（影響閱讀）問題

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

無

出現亂碼

無

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

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

無

閱讀模式

使用Android無閱讀模式

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

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

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

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

問題

可能原因

明明是雙版排版還是要用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>

補充

image

#3

問題

可能原因

沒有發現go top按鈕

#4

問題

可能原因

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

#5

問題

可能原因

那個背景圖案是固定的，標題位置又是用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;
}

補充

image

#6

問題

可能原因

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 影響到展開後的網頁效能 或許可以調整做法讓使用經驗變好

1個讚