漁業署-盧苡萱

網站

漁業署

姓名

盧苡萱

檢測日期

2018-04-24

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度(手機螢幕)

375x667

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

壞掉的連結

參數錯誤

跑版(影響閱讀)問題

文字跑版


表格跑版


圖片跑版

範例


網頁跑版

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

出現亂碼

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

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

閱讀模式

不可以用

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

從行動版跳至網頁版


圖片畫質太低


圖片跑不出來


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

資訊充足


網站導覽看過了會顯示顏色


跳至新的網站有標注

問題

#補充
這不是跑版,這是他要的排版,因為他加了text-indent: -2em;

問題

建議修改:

可以縮減margin就不會換行,不過這也是算視覺上跑版,實際上則是沒有

問題:

補充

皆是視覺上跑板

問題:

可能原因:

CSS 設定錯誤

原始程式:

位置: 原始碼:1193

<div class="newsSearchBox wordSearchBox" style="overflow:  scroll;">
        <dl>
          <dt>開頭字母:</dt>
          <dd>
            <div> <span><a href="?StartsWord=A">A</a><a href="?StartsWord=B">B</a><a href="?StartsWord=C">C</a><a href="?StartsWord=D">D</a><a href="?StartsWord=E">E</a><a href="?StartsWord=F">F</a><a href="?StartsWord=G">G</a><a href="?StartsWord=H">H</a><a href="?StartsWord=I">I</a><a href="?StartsWord=J">J</a><a href="?StartsWord=K">K</a><a href="?StartsWord=L">L</a><a href="?StartsWord=M">M</a><a href="?StartsWord=N">N</a><a href="?StartsWord=O">O</a><a href="?StartsWord=P">P</a><a href="?StartsWord=Q">Q</a><a href="?StartsWord=R">R</a><a href="?StartsWord=S">S</a><a href="?StartsWord=T">T</a><a href="?StartsWord=U">U</a><a href="?StartsWord=V">V</a><a href="?StartsWord=W">W</a><a href="?StartsWord=X">X</a><a href="?StartsWord=Y">Y</a><a href="?StartsWord=Z">Z</a></span></div>
          </dd>
        </dl>
      </div>

建議修改:

建議可以改變顯示方式,如果還是要這樣顯示也只能加overflow:scroll;

問題

建議

RWD的CSS對於表格完全沒做處理,也不應該在一開始就寫死寬度,也建議別使用table,可以改用別的方式實作RWD,在這邊我用最不好的方式以解決目前跑板問題,希望能改變寫法
overflow: scroll

問題:

補充:

這其實是他要的效果,圖在文字旁邊

建議解法:

他為了網頁版要水平一排,所以把長寬寫死了,但其實也沒有倒跑版,但建議可以改方式排版,例如用grid做出類似table的排版

問題:

補充:

他是一張圖…

問題:

可能原因:

CSS 設定錯誤

原始程式:

位置: 原始碼:1211

div.act_link {
	display: table-cell;
	height: 230px;
	background: url(http://www.tfsda.org.tw/wod2014/images/logo.jpg) 20px no-repeat center;
	vertical-align: middle;
}

建議修改:

div.act_link {
	display: table-cell;
	height: 230px;
	background: url(http://www.tfsda.org.tw/wod2014/images/logo.jpg) no-repeat center;
	vertical-align: middle;
    background-size: 100% 100%
}

補充

問題:

可能原因:
CSS 設定錯誤

原始程式:

位置: https://www.fa.gov.tw/cht/css/firefox.css:1155

div.content h3 {
    background: url(../images/131116_img/inner_title_icon.png) left bottom no-repeat;
    margin-top: 15px;
    height: 27px;
    line-height: 27px;
    font-size: 1.3em;
    color: #000;
    border-bottom: 3px solid #32a4d8;
    padding-left: 40px;
}

建議修改:

div.content h3 {
    background: url(../images/131116_img/inner_title_icon.png) left bottom no-repeat;
    margin-top: 15px;
    height: auto;
    line-height: 27px;
    font-size: 1.3em;
    color: #000;
    border-bottom: 3px solid #32a4d8;
    padding-left: 40px;
}

補充

問題:

可能原因:
(範例)
CSS 設定錯誤

原始程式:

位置: https://www.fa.gov.tw/cht/TaiwanOceansProtectionAreas/content.aspx?id=1&chk=2001739d-d4cd-4ded-bf92-d570912baf08:1230

.sea_drt_imgbg#item01 {
    background-image: url(http://www.fa.gov.tw/upload/e_images/20140526_img/drtbg01.png);
}

建議修改:

.sea_drt_imgbg#item01 {
    background-size: cover;
    background-image: url(http://www.fa.gov.tw/upload/e_images/20140526_img/drtbg01.png);
}

補充

建議改變手機版呈現方式,不然還是很奇怪