警政署警光雜誌-高偉庭

網站

警政署警光雜誌

姓名

高偉庭

檢測日期

2018-04-03

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本:Chrome 64.0.3325.109

解析度(手機螢幕)

360x640 pixels

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

壞掉的連結

  1. 首頁>警網連結>地方警網>金門縣警察局
    Directory Listing Denied

  1. 首頁>警網連結>地方警網>連江縣警察局
    無法連上這個網站

  1. 首頁>警網連結>中央警網>保一總隊
    連線不是私人連線

  1. 首頁>警網連結>中央警網>基隆港務警察總隊
    首頁>警網連結>中央警網>高雄港務警察總隊
    首頁>警網連結>中央警網>警察機械修理廠
    網站跑的很慢

  1. 首頁>警網連結>粉絲專頁>保安警察第七總隊
    粉專應該是刪除了?

跑版(影響閱讀)問題

  1. 首頁
    雜誌專區的方塊與其他方塊排版不整齊看了很討厭 解法回文連結

  1. 首頁>訊息公告其中有附圖的篇目
    圖片顯示不完全但可滑動 解法回文連結
    2018-05-08_225255

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

出現亂碼

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

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

閱讀模式

不適用

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

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

  1. 首頁
    最上方的排板其實有點佔空間,並不需要用那麼大的文字 解法回文連結
  2. 最上方警光的標誌太貼齊上下邊線了,如果上下有一點距離看了比較舒服
  3. 首頁 > 雜誌專區
    首頁 > 警政新聞>社會新聞
    首頁 > 警政新聞>地方新聞
    首頁 >人事動態
    首頁>訊息公告
    首頁>警網連結>地方警網
    首頁>警網連結>中央警網
    首頁>警網連結>其他網站
    首頁>警網連結>粉絲專頁
    在左右側放上箭頭點按跳到下一頁,這個方式有點不常在手機網頁中看到,民眾會較不習慣,建議還是改成一般在頁面下方有下一頁選項就好了
  4. 最頂端黃色以及下方藍色bar顏色太衝突,建議可以換顏色
  5. 首頁 > 雜誌專區
    這種排版方式過份佔空間,建議修改排列方式,另外也建議不要點擊時直接下載文件,可以先跳出該期雜誌的內容目錄簡介、封面等 解法回文連結

問題:

可能原因:

區塊間隔設置問題。

原始程式:

  1. "雜誌專區"標題,位置:https://police.npa.gov.tw/NPAGip/wSite/xslGip/mobilePolice/css/mobile.css:69
.newMag>h1 {
    position: absolute;
    left: 2%;
    top: .6em;
    width: 3em;
    padding: .1em .06em .1em .1em;
    margin: 0;
    /* padding: .5em 16px; */
    font-size: 2.4em;
    font-weight: normal;
    text-align: center;
    line-height: 1.4;
    color: #d3e822;
    letter-spacing: .1em;
    border: 1px solid #999;
}
  1. 列表中第一個雜誌區塊,位置:https://police.npa.gov.tw/NPAGip/wSite/xslGip/mobilePolice/css/mobile.css:75
.newMag li:first-child {
    float: right;
    overflow: visible;
}
  1. 列表中其餘雜誌區塊,位置:https://police.npa.gov.tw/NPAGip/wSite/xslGip/mobilePolice/css/mobile.css:71
.newMag li {
    float: left;
    clear: right;
    width: 48%;
    margin: 0 1% 16px;
    padding: 0;
}

建議修改:

將區塊垂直置中排列,並將寬度改為80%。

  1. "雜誌專區"標題,位置:https://police.npa.gov.tw/NPAGip/wSite/xslGip/mobilePolice/css/mobile.css:69
.newMag>h1 {
    top: .6em;
    width: 80%;
    margin: 1% auto;
    font-size: 2.4em;
    font-weight: normal;
    text-align: center;
    line-height: 1.4;
    color: #d3e822;
    letter-spacing: .1em;
    border: 1px solid #999;
}
  1. 列表中第一個雜誌區塊,位置:https://police.npa.gov.tw/NPAGip/wSite/xslGip/mobilePolice/css/mobile.css:75
.newMag li:first-child {
    overflow: visible;
    margin: auto;
}
  1. 列表中其餘雜誌區塊,位置:https://police.npa.gov.tw/NPAGip/wSite/xslGip/mobilePolice/css/mobile.css:71
.newMag li {
    clear: right;
    width: 80%;
    margin: 3% auto;
    padding: 0;
}

補充:

(修正後之截圖)

問題:

可能原因:

圖片過寬,需整頁左右滑動檢視圖片。

原始程式:

位置:view-source:https://police.npa.gov.tw/NPAGip/wSite/ct?xItem=117002449&ctNode=11496&mp=2:87

div class="image">
<img src="public/Data/f1502265158825.JPG" alt="「第13屆鐵漢柔情攝影比賽」得獎名單公布囉!"></div>

建議修改:

設置水平滾輪,供使用者左右滑動檢視。
做法:在圖片外層div標籤中加上overflow:auto;

<div class="image" style="overflow:auto;">
<img src="public/Data/f1502265158825.JPG" alt="「第13屆鐵漢柔情攝影比賽」得獎名單公布囉!"></div>

補充:

(修正後之截圖)
56

問題:

建議修改:

可參考回覆二樓針對區塊寬度的修改範例。