警政署警光雜誌－高偉庭

ray 內政部
, ,
#1

網站

警政署警光雜誌

姓名

高偉庭

檢測日期

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. 首頁
    雜誌專區的方塊與其他方塊排版不整齊看了很討厭 解法回文連結
    2018-05-08_223612
  1. 首頁＞訊息公告其中有附圖的篇目
    圖片顯示不完全但可滑動 解法回文連結
    2018-05-08_225255

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

無

出現亂碼

無

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

無

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

無

閱讀模式

不適用

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

無

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

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

問題：

可能原因：

區塊間隔設置問題。

原始程式：

  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;
}

補充：

(修正後之截圖)
55

#3

問題：

可能原因：

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

原始程式：

位置：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

#4

問題：

建議修改：

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