全民資安素養網-高偉庭

ray 教育部
, ,
#1

網站

全民資安素養網

姓名

高偉庭

檢測日期

2018-05-14

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本：Chrome 64.0.3325.109

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

無

跑版（影響閱讀）問題

  1. 首頁>服務信箱
    我不是機器人選項顯示不完全，可左右移動 解法回文連結
    Screenshot_20180514-204154
  1. 兒童版、青少年版、家長版、大眾版都有此問題
    資源中心、文章區等標題應該要並排比較合常理 解法回文連結
    2018-05-14_204836

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

無

出現亂碼

無

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

無

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

無

閱讀模式

不適用

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

無

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

  1. 除了首頁之外的所有頁面，最上方的網站名稱太大了，會讓滑動網頁內容很不方便看 解法回文連結
    2018-05-14_204613
  1. 點入每一篇文章、影音都有此問題
    常理應該是上一頁在左、下一頁在右吧 解法回文連結
    2018-05-14_205908
  1. 我覺得四個版本的內容差別實在不大，乾脆把四個版本的差異放在搜尋的地方。就進入同一個網頁，搜尋時可以搜尋你要的是家長資料還是青少年資料等
  1. 每個版本的資源中心、文章區、影音區等大項目，搜尋的部份都在最上方佔了很大的空間，我覺得若能把搜尋改小一點（或可以縮起來），讓民眾一點入先看到文章列表比較好
#2

問題：

可能原因：

reCAPTCHA寬度設置問題。

原始程式：

位置：view-source:服務信箱 | 全民資安素養網
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">

補充：

(修正後之截圖)
11

#3

問題：

可能原因：

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

原始程式：

位置：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; */
}

補充：

(修正後之截圖)
12

#4

問題：

可能原因：

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

建議修改：

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

#5

問題：

建議修改：

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