內政部消防署－高偉庭

ray 內政部
, ,
#1

網站

內政部消防署

姓名

高偉庭

檢測日期

2018-04-04

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本：Chrome 64.0.3325.109

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

  1. 首頁 > 相關連結 > 消防相關基金會>財團法人長春防災基金會
    首頁 > 下載專區 > 歷年災害紀錄>更多資訊>災害專區
    除了花蓮震災的部份，其他都會跑出404 Not Found
  2. 首頁 > 便捷查詢>液化石油氣零售業者營運申報暨容器管理系統
    首頁 > 相關連結 > 部會機關
    網站跑慢也跑不出來

跑版（影響閱讀）問題

  1. 首頁
    FB框框無法顯示完整圖片 解決回文連結
    2018-04-04_160210
  2. 首頁 > 防災知識 > 火災預防 > 防火宣導 > 防火常識
    首頁 > 本署介紹 > 消防人員制服介紹
    首頁 > 資訊公開 > 統計資料 > 消防機關人力概況
    首頁 > 活動訊息 > 本署活動 > 台美警消之友協會捐贈消防專用半面罩呼吸器
    首頁 > 防災知識 > 住宅防火 > 住宅防火對策
    首頁 > 防災知識 > 住宅防火 > 住宅用火災警報器 > 住宅用火災警報器成功案例（其中每一個成功案例頁面都有此問題）
    首頁 > 防災知識 > 火災預防 > 防火宣導 > 防火常識
    首頁 > 防災知識 > 火災預防 > 防火宣導 > 老人防火宣導
    首頁 > 防災知識 > 火災預防 > 消防安全管理制度 > 防火管理制度
    首頁 > 防災教材 > 防災社區
    圖片無法完全顯示 解決回文連結
    2018-04-04_155649
  3. [中華民國內政部消防署全球資訊網 > 資訊公開 > 統計資料 > 緊急救護統計](首頁 > 資訊公開 > 統計資料 > 緊急救護統計)
    表格無法完全顯示 解決回文連結
    2018-04-04_162449
  4. 首頁 > 快捷服務
    連結圖片無法完全顯示 解決回文連結
    2018-04-04_163004
  5. 首頁 > 本署介紹 > 消防人員制服介紹
    版面跑亂了 解決回文連結
    2018-04-04_164705
  6. 首頁 > 資訊公開 > 施政計畫及研究報告 > 災害防救業務計畫 > 風災災害防救業務計畫
    首頁 > 資訊公開 > 施政計畫及研究報告 > 災害防救業務計畫 > 震災(含土壤液化)災害防救業務計畫
    首頁 > 資訊公開 > 施政計畫及研究報告 > 災害防救業務計畫 > 火災災害防救業務計畫
    首頁 > 資訊公開 > 施政計畫及研究報告 > 災害防救業務計畫 > 爆炸災害防救業務計畫
    首頁 > 資訊公開 > 政風園地 > 財產申報 > 申報資訊
    首頁 > 資訊公開 > 政風園地 > 安全與機密維護宣導 > 案例與錦囊
    表格的某些欄位無法顯示 解決回文連結
    2018-04-04_171907

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

無

出現亂碼

無

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

無

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

無

閱讀模式

不適用

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

  1. 左上、右上都有漢堡（？），會讓讀者分不清楚(解決回文連結)
    2018-04-04_154858
  2. 在點擊左右上的漢堡時，左右欄會先跳出來、中間的畫面才會往旁邊移動。這個動作不太順暢（建議自己按按看）(解決回文連結)
  3. 首頁＞災害應變中心聯絡方式
    首頁>各消防局據點聯絡方式
    兩項內容其實蠻相似的，建議可以整合成一個頁面，會更清楚方便
  4. 首頁 > 緊急救護 > 常用急救方法 > 停止呼吸心跳處理-心肺復甦術(CPR+AED)衛生福利部緊急醫療管理系統衛生福利部緊急醫療管理系統
    首頁 > 資訊公開 > 出版品專區 > 消防白皮書（其中每一項點開）
    [首頁 > 資訊公開 > 出版品專區 > 消防月刊（其中每一項點開）](中華民國內政部消防署全球資訊網 > 資訊公開 > 出版品專區 > 消防月刊 > 消防月刊 (109年~85年)
    顯示＂你的連線不是私人連線＂(解決回文連結)
  5. 首頁
    往下拉＂119報案＂的部份，每個連結連到的網頁都是錯的（e.g. 點擊聽語障人士報案時跑到報案要領頁面）(解決回文連結)
    2018-04-04_161824
  6. 首頁 > 交流園地 > 線上投票>我要填寫
    為什麼都截止了我還可以填，為什麼一打開填寫頁面時已經先按好答案ㄌ，why(解決回文連結)
    2018-04-04_162137
  7. 首頁
    往下拉災害統計圖表處，無論選哪一個選項後按更多資訊，都會跳到同一個頁面（緊急救護統計），有點meaningless(解決回文連結)
    2018-04-04_162652
  8. 首頁 > 最新消息 > 新聞發布
    首頁 > 最新消息 > 災情訊息
    沒有附圖的新聞只會顯示標題，但標題下有這麼大的空格很怪；有附圖的新聞只會顯示圖片，沒有標題，會讓讀者搞混。(解決回文連結)
    2018-04-04_165433
  9. 首頁 > 防災知識 > 山域活動安全
    首頁 > 防災知識 > 水上活動安全
    首頁 > 緊急救護 > 珍惜救護資源 > 禮讓救護車
    首頁 > 緊急救護 > 緊急救護小知識 > 急救學習管道
    首頁 > 緊急救護 > 緊急救護小知識 > 縣市消防局教學網
    空白頁面(解決回文連結)
    2018-04-06_195539

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

  1. 首頁 > 緊急救護 > 常用急救方法 > 停止呼吸心跳處理-心肺復甦術(CPR+AED)
    還要從消防署網站連結到各縣市消防局網站看影片其實蠻meaningless的，建議可以統一提供一次影片就好了，畢竟這種事不會因縣市有所差別啊
  2. 首頁 > 本署介紹 > 消防大事紀
    資料有點舊，而且看不是很出到底大事紀是多大事
  3. 首頁 > 本署介紹 > 消防人員制服介紹
    手機版的左邊欄位，寫成"消防人員服制介紹"
  4. 有些資訊超舊，還有98年的資料是（問號臉）
#2

問題：

可能問題：

iframe寬度設固定長寬，導致跑版。

原始程式：

位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/index.css:2115

@media (max-width: 360px)
.fbBox iframe {
    position: relative;
    margin: 40px auto 0% auto;
    width: 290px;
}

建議修改：

將width: 290px;刪除。

@media (max-width: 360px)
.fbBox iframe {
    position: relative;
    margin: 40px auto 0% auto;
}

補充：

(修正後截圖)
31

#3

問題：

可能問題：

圖片寬度設固定長寬，導致跑版。

原始程式：

<img alt="" src="http://www.nfa.gov.tw/upload/ckfinder/images/%E7%81%AB%E7%81%BD(1).jpg" style="width: 729px; height: 1024px;">

建議修改：

將寬度設為百分比。

<img alt="" src="http://www.nfa.gov.tw/upload/ckfinder/images/%E7%81%AB%E7%81%BD(1).jpg" style="width:100%;">

補充：

(修正後截圖)
32

#4

問題：

可能原因：

表個內容無法換自動換行，導致跑版，影響閱讀。

建議修改：

將表格結構重新排列，參考解法：行政院農業委員會-林文琦 - #2 youyuchen.alice

#5

問題：

可能問題：

因display: inline;語法，導致跑版。

原始程式：

位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/links.css:47

@media screen and (max-width: 480px)
.links ul {
    display: inline;
    border-bottom: none;
}

建議修改：

獎display: inline; 移除。

@media screen and (max-width: 480px)
.links ul {
    /* display: inline; */
    border-bottom: none;
}

補充：

(修正後截圖)
34

#6

問題：

可能原因：

內文與左側標籤列div重疊，影響閱讀。

#原始程式：
位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/page.css:1033

@media (max-width: 600px)
.bar .barTitle {
    float: none;
    border-bottom: 2px solid #FF8535;
    margin-bottom: 5px;
    margin-top: 0px;
}

位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/page.css:256

.bar .barTitle {
    float: none;
    text-align: left;
    background: white;
    color: #FF8535;
    font-size: 25px;
    font-weight: 500;
    padding-right: 10px;
    margin-top: 0px;
    margin-bottom: 5px;
    border-bottom: 2px solid #FF8535; 
}

位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/page.css:175

aside {
    /* width: 20%; */
    display: inline-block;
    float: left;
    margin-right: 2%;
}

<img alt="88年消防制服規制" src="http://www.nfa.gov.tw/upload/ckfinder/images/88%E5%B9%B4%E6%9C%8D%E5%88%B6.PNG" style="width: 895px; height: 743px; float: left;">

建議修改：

  1. 將橘色底線刪除。
    位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/page.css:1033 
@media (max-width: 600px)
.bar .barTitle {
    float: none;
    /* border-bottom: 2px solid #FF8535; */
    margin-bottom: 5px;
    margin-top: 0px;
}

位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/page.css:256

.bar .barTitle {
    float: none;
    text-align: left;
    background: white;
    color: #FF8535;
    font-size: 25px;
    font-weight: 500;
    padding-right: 10px;
    margin-top: 0px;
    margin-bottom: 5px;
    /* border-bottom: 2px solid #FF8535; */
}
  1. 將標題列寬度百分比移除。
    位置：https://www.nfa.gov.tw/upload/webstyle_default/assets/css/page.css:175 
aside {
    /* width: 20%; */
    display: inline-block;
    float: left;
    margin-right: 2%;
}
  1. 將圖片寬度設置為百分比。
<img alt="88年消防制服規制" src="http://www.nfa.gov.tw/upload/ckfinder/images/88%E5%B9%B4%E6%9C%8D%E5%88%B6.PNG" style="width: 100%; float: left;">

補充：

(修正後截圖)
35
36

#7

問題：

可能原因：

已有RWD Table，但未加入data-th設置標題名稱。

原始程式：

<tr>
	<td class="center" nowrap="">106-12-20</td>
	<td><a class="article_class" tabindex="" href="index.php?act=download&amp;ids=557&amp;path=../upload/pro/attachment/23ac8af0f17d3218425b45b94a9d356d.pdf&amp;title=%E9%A2%A8%E7%81%BD%E7%81%BD%E5%AE%B3%E9%98%B2%E6%95%91%E6%A5%AD%E5%8B%99%E8%A8%88%E7%95%AB%2893.06.16%E6%A0%B8%E5%AE%9A%29" target="article_search" title="風災災害防救業務計畫(93.06.16核定)">風災災害防救業務計畫(93.06.16核定)</a></td>
	<td>災害管理組</td>
</tr>

建議修改：

在<td>中加入data-th="標題名稱"，參考解法：行政院農業委員會-林文琦 - #2 youyuchen.alice

<tr>
	<td data-th="發布時間" nowrap="">106-12-20</td>
	<td data-th="標題"><a class="article_class" tabindex="" href="index.php?act=download&amp;ids=557&amp;path=../upload/pro/attachment/23ac8af0f17d3218425b45b94a9d356d.pdf&amp;title=%E9%A2%A8%E7%81%BD%E7%81%BD%E5%AE%B3%E9%98%B2%E6%95%91%E6%A5%AD%E5%8B%99%E8%A8%88%E7%95%AB%2893.06.16%E6%A0%B8%E5%AE%9A%29" target="article_search" title="風災災害防救業務計畫(93.06.16核定)">風災災害防救業務計畫(定)</a></td>
	<td data-th="發布單位">災害管理組</td>
</tr>

補充：

(修正後截圖)
37