全民資安素養網-高偉庭

網站

全民資安素養網

姓名

高偉庭

檢測日期

2018-05-14

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本:Chrome 64.0.3325.109

解析度(手機螢幕)

360x640 pixels

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

壞掉的連結


跑版(影響閱讀)問題

  1. 首頁>服務信箱
    我不是機器人選項顯示不完全,可左右移動 解法回文連結

  1. 兒童版、青少年版、家長版、大眾版都有此問題
    資源中心、文章區等標題應該要並排比較合常理 解法回文連結
    2018-05-14_204836

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

出現亂碼

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

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

閱讀模式

不適用

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

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

  1. 除了首頁之外的所有頁面,最上方的網站名稱太大了,會讓滑動網頁內容很不方便看 解法回文連結

  1. 點入每一篇文章、影音都有此問題
    常理應該是上一頁在左、下一頁在右吧 解法回文連結

  1. 我覺得四個版本的內容差別實在不大,乾脆把四個版本的差異放在搜尋的地方。就進入同一個網頁,搜尋時可以搜尋你要的是家長資料還是青少年資料等

  1. 每個版本的資源中心、文章區、影音區等大項目,搜尋的部份都在最上方佔了很大的空間,我覺得若能把搜尋改小一點(或可以縮起來),讓民眾一點入先看到文章列表比較好

問題:

可能原因:

reCAPTCHA寬度設置問題。

原始程式:

位置:view-source:https://isafe.moe.edu.tw/webform/706?user_type=4
122行

<div class="captcha">

建議修改:

  1. <head></head>中新增以下CSS。
.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;
}
  1. 在reCAPTCHA的class加入video-container
<div class="captcha video-container">

補充:

(修正後之截圖)

問題:

可能原因:

標題邊界設置較寬,影響瀏覽體驗。

原始程式:

位置:https://isafe.moe.edu.tw/sites/default/files/css/css_VPaSzKAT-RZqwRyYzjdHH8coVXLMRSpwxQ0SgqrdIIE.css:2

body.page-kids header.navbar>div.second-menu ul li, body.page-teenager header.navbar>div.second-menu ul li, body.page-parents header.navbar>div.second-menu ul li, body.page-public header.navbar>div.second-menu ul li {
    margin: 0 25px;
}

建議修改:

  1. 將li的margin設置移除。
body.page-kids header.navbar>div.second-menu ul li, body.page-teenager header.navbar>div.second-menu ul li, body.page-parents header.navbar>div.second-menu ul li, body.page-public header.navbar>div.second-menu ul li {
    /* margin: 0 25px; */
}

補充:

(修正後之截圖)

問題:

可能原因:

設置上下頁按鈕的section因應螢幕縮放垂直排列顯示,導致使用手機觀看時跑版。

建議修改:

可以將文字移除,只顯示上下頁按鈕,即能並排在一列。

問題:

建議修改:

將logo圖縮小並與旁邊的選單按鈕並排顯示,加上移除bar的margin設置,即能縮小整體header高度。