農糧署臺灣農產品生產追溯系統-吳姿瑩

網站

農糧署臺灣農產品生產追溯系統

姓名

吳姿瑩

檢測日期

2018-05-23

檢測裝置

Samsung Galaxy A8 SM-A530F

作業系統 與 瀏覽器版本

Android 7.1.1
Chrome版本:Chrome 61.0.3163.98

解析度(手機螢幕)

360X740 Pixels

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

壞掉的連結

跑版(影響閱讀)問題



*首頁>停用案件公告
跑版 解法回文連結




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



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

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

閱讀模式

我是安卓

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


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

問題:

可能原因:

  1. 此麵包屑為列表排列,因應螢幕寬度自動換行,導致"最新消息"連結後有留白。
  2. 內文上方的padding設置較寬,導致有多餘空格(此應是想讓標題與上方麵包屑做區隔)。

原始程式:

內文(content)的CSS,位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5

.content {
    color: #666;
    padding: 55px 0 0 0;
    font-size: .94em;
}

建議修改:

  1. 最新消息"連結後有留白,此為列表自動排列導致,非程式問題。
  2. padding設置較寬,可以將padding設置移除。
.content {
    color: #666;
    /* padding: 55px 0 0 0; */
    font-size: .94em;
}

補充:

(修正後之截圖)

問題:

可能原因:

選頁按鈕過於擁擠,且斷行位置較不符合使用者瀏覽習慣。

原始程式:

  1. ul的CSS,位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5
.pagination ul {
    display: inline;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
  1. li的CSS,位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5
.pagination ul li {
    display: inline;
}

建議修改:

增加按鈕間空格,且更改"下一頁"按鈕斷行位置。

  1. 更改ul的displayblock;,位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5
.pagination ul {
    display: block;
    list-style: none outside none;
    margin: 20px;
    padding: 0;
}
  1. 更改li的displayinline-block;,位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5
.pagination ul li {
    display: inline-block;
}

補充:

(修正後之截圖)

問題:

可能原因:

表格過度換行,不便使用者觀看;且因行動版螢幕過小,表格寬度已達極限無法再變窄,導致跑版。

原始程式:

  1. 表格外層form的CSS,位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:1
body, h1, h2, h3, h4, h5, h6, p, blockquote, th, td, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea, select {
    margin: 0;
    padding: 0;
}
  1. 表格清單div的CSS,位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5
@media screen and (max-width: 480px)
.producer-list {
    width: 100%;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

建議修改:

將表格寬度加寬,使內文不過度換行,並增加水平滾輪供使用者左右滑動檢視。
做法:

  1. 在表格外層的form標籤中加入overflow: auto;
    位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:1
body, h1, h2, h3, h4, h5, h6, p, blockquote, th, td, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea, select {
    margin: 0;
    padding: 0;
    overflow: auto;
}
  1. 更改表格寬度為180%
    位置:https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5
@media screen and (max-width: 480px)
.producer-list {
    width: 180%;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

補充:

(修正後之截圖)

問題:

可能原因:

下面"反映圖片"左方寬度設為固定數值,導致上方的表單標題與填寫欄位寬度比例不佳,影響使用者瀏覽體驗。

原始程式:

圖片欄位,位置:view-source:https://qrc.afa.gov.tw/Report:248

<li id="defImg" style="width: 320px;">

建議修改:

更改圖片欄位的寬度比例為90%

<li id="defImg" style="width: 90%;">

補充:

(修正後之截圖)

問題:

可能原因:

內文div的padding-bottom設置過寬。

原始程式:

圖片欄位,位置:view-source:https://qrc.afa.gov.tw/:192

<div class="main cf" style="padding-bottom: 486px;">

建議修改:

padding-bottom設置移除。

<div class="main cf">

補充:

(修正後之截圖)

問題:

可能原因:

網頁皆有設置<meta http-equiv="Content-Type" content="text/html; charset=utf-8">,因此不確定此顯示為原文之符號,亦或為亂碼。