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

ray 農業委員會
, ,
#1

網站

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

姓名

吳姿瑩

檢測日期

2018-05-23

檢測裝置

Samsung Galaxy A8 SM-A530F

作業系統 與 瀏覽器版本

Android 7.1.1
Chrome版本：Chrome 61.0.3163.98

解析度（手機螢幕）

360X740 Pixels

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

是

壞掉的連結

無

跑版（影響閱讀）問題

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

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

無

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

無

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

無

閱讀模式

我是安卓

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

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

#2

問題：

可能原因：

  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

#3

問題：

可能原因：

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

原始程式：

  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的display為block;，位置：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的display為inline-block;，位置：https://qrc.afa.gov.tw/Browser/css/cb_inner2015.css?v=201804261:5 
.pagination ul li {
    display: inline-block;
}

補充：

(修正後之截圖)
2

#4

問題：

可能原因：

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

原始程式：

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

補充：

(修正後之截圖)
3

#5

問題：

可能原因：

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

原始程式：

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

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

建議修改：

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

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

補充：

(修正後之截圖)
4

#6

問題：

可能原因：

內文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">

補充：

(修正後之截圖)
image

#7

問題：

可能原因：

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