水土保持局農村風情網-楊喻文

網站

水土保持局農村風情網

姓名

楊喻文

檢測日期

2018-05-20

檢測裝置

OPPO A57

作業系統 與 瀏覽器版本

Android 6.0.1
Chrome版本:Chrome 65.0.3325.109

解析度(手機螢幕)

320x640 pixels

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


壞掉的連結


跑版(影響閱讀)問題

  1. 走進農村說 // 解法回文連結
  1. 文字被切掉了
  2. 圖片縮放方式很奇怪,不應該是長這樣的,而且還超糊 :face_vomiting:
  1. 成果花絮、農村活動行事例、幸福農村 // 解法回文連結

網頁版看起來比手機版還好,但事也沒好到哪裡去,終究還是都疊在一起了



文字切掉 // 解法回文連結


圖片跑版 // 解法回文連結


網址被切掉 // 解法回文連結


表格被切 // 解法回文連結







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


出現亂碼


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


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


閱讀模式

我使用安卓


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


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


問題:

可能原因:

RWD 沒設定好

原始程式:

https://rural.swcb.gov.tw/Content/css/web?v=NKCnePz9xdKiA5ILaM8U4FD_i8WWoVefHaP5Y0UhO2Y1 第 954 行
.index_info a {
	display: block;
	overflow: hidden;
}

建議修改:

https://rural.swcb.gov.tw/Content/css/web?v=NKCnePz9xdKiA5ILaM8U4FD_i8WWoVefHaP5Y0UhO2Y1 第 954 行 修改 width: 96vw;
.index_info a {
	display: block;
	overflow: hidden;
	width:  96vw;
}

補充

結尾(選填,可增加網站建議) (edited)

PDIS.2018 資訊生撰寫模板 - 存檔

問題:

可能原因:

設計問題

建議修改:

請重新思考界面設計

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

設計問題

建議修改:

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 沒設定好

原始程式:

https://rural.swcb.gov.tw/Content/css/web?v=NKCnePz9xdKiA5ILaM8U4FD_i8WWoVefHaP5Y0UhO2Y1 第 1192 行
tent p {
    width: 100%; 
    line-height: 23px;
    margin-bottom: 15px;
}

建議修改:

https://rural.swcb.gov.tw/Content/css/web?v=NKCnePz9xdKiA5ILaM8U4FD_i8WWoVefHaP5Y0UhO2Y1 第 1192 行 註解 width: 100%;
tent p {
    /* width: 100%; */
    line-height: 23px;
    margin-bottom: 15px;
}

補充

手機板

電腦版

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 沒設定好

原始程式:

第 204 行
<img alt="" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/213edc75add44eb784bd1018r(1).jpg" style="width: 600px; height: 264px;" />

建議修改:

第 204 行 新增 class=“rwd_img”
<img class="rwd_img" alt="" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/213edc75add44eb784bd1018r(1).jpg" style="width: 600px; height: 264px;" />
第9行 新增

<style type="text/css">

    @media (min-width: 300px) and (max-width: 991px){
        .rwd_img{
            width: 100% !important;
            height: auto !important;
            }
    }
    
</style>

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 沒設定好

建議修改:

網址過長請改用縮網址

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

表格問題

原始程式:

第 210-235 行
<table border="1" cellpadding="1" cellspacing="1" style="width:400px;">
	<tbody>
		<tr>
			<td colspan="2" style="text-align: center;">宜蘭縣蘇澳鎮朝陽社區</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡人</td>
			<td style="text-align: center;">吳小姐</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡電話</td>
			<td style="text-align: center;">03-9981981</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align: center;">花蓮縣瑞穗鄉富源社區</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡人</td>
			<td style="text-align: center;">徐小姐</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡電話</td>
			<td style="text-align: center;">03-8811985</td>
		</tr>
	</tbody>
</table>

建議修改:

第 210-235 行 新增 div style=“min-height: .01%;overflow-x: auto;”
<div style="
    min-height: .01%;
    overflow-x: auto;
">
<table border="1" cellpadding="1" cellspacing="1" style="width:400px;">
	<tbody>
		<tr>
			<td colspan="2" style="text-align: center;">宜蘭縣蘇澳鎮朝陽社區</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡人</td>
			<td style="text-align: center;">吳小姐</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡電話</td>
			<td style="text-align: center;">03-9981981</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align: center;">花蓮縣瑞穗鄉富源社區</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡人</td>
			<td style="text-align: center;">徐小姐</td>
		</tr>
		<tr>
			<td style="text-align: center;">聯絡電話</td>
			<td style="text-align: center;">03-8811985</td>
		</tr>
	</tbody>
</table></div>

補充

改成可滑動的表格

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 沒設定好

原始程式:

https://rural.swcb.gov.tw/Specialty/Detail/632 第 35 行
li.block_container {
    height: 400px;
    line-height: 400px;
    overflow: hidden;
}

建議修改:

第9行 新增

<style type="text/css">

    @media (min-width: 300px) and (max-width: 991px){
        li.block_container {
            margin-left: 0px !important; 
            margin-top: 0px !important; 
            height: 100% !important;
            line-height: 100% !important;
            overflow: hidden !important;
        }
    }
    
</style>

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 沒設定好

原始程式:

第 205-266 行
<table border="0" cellpadding="1" cellspacing="1" style="width:500px;">
	<tbody>
		<tr>
			<td><img alt="遊客自行騎乘自行車" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image001(80).jpg" style="width: 250px; height: 188px;"></td>
			<td><img alt="遊客合照" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/IMAG2743.jpg" style="line-height: 20.8px; width: 250px; height: 189px;"></td>
		</tr>
		<tr>
			<td><span style="line-height: 20.8px;">遊客自行騎乘自行車至鳳鳴社區</span></td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><img alt="鳳鳴社區提供遊客的早市" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image003(87).jpg" style="width: 250px; height: 188px;"></td>
			<td><img alt="鳳鳴社區在地好吃的早餐" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image004(34).jpg" style="width: 250px; height: 188px;"></td>
		</tr>
		<tr>
			<td>
			<p style="line-height: 20.8px;">鳳鳴社區提供遊客的早市 &nbsp;</p>
			</td>
			<td>
			<p style="line-height: 20.8px;">鳳鳴社區在地好吃的早餐</p>

			<p style="line-height: 20.8px;">&nbsp;</p>
			</td>
		</tr>
		<tr>
			<td><img alt="每年一度的路跑賽事" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image005(88).jpg" style="width: 250px; height: 140px;"></td>
			<td><img alt="由鳳鳴社區製作的完賽證明" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image006(23).jpg" style="width: 250px; height: 140px;"></td>
		</tr>
		<tr>
			<td>
			<p style="line-height: 20.8px;">每年一度的路跑賽事 &nbsp; &nbsp; &nbsp;&nbsp;</p>
			</td>
			<td>
			<p style="line-height: 20.8px;">&nbsp;由鳳鳴社區製作的完賽證明</p>
			</td>
		</tr>
		<tr>
			<td><img alt="微熱山丘大門處" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image007(65).jpg" style="width: 250px; height: 141px;"></td>
			<td><img alt="微熱山丘以閩式建築搭建" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image008(19).jpg" style="width: 250px; height: 141px;"></td>
		</tr>
		<tr>
			<td>
			<p style="line-height: 20.8px;">微熱山丘大門處 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p>
			</td>
			<td>
			<p style="line-height: 20.8px;">微熱山丘以閩式建築搭建</p>
			</td>
		</tr>
		<tr>
			<td><img alt="入園每人即可獲得一塊鳳梨酥及茶水 " src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image009(57).jpg" style="width: 250px; height: 141px;"></td>
			<td><img alt="  鳳梨酥販賣的場所" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image010(17).jpg" style="width: 250px; height: 141px;"></td>
		</tr>
		<tr>
			<td><span style="line-height: 20.8px;">入園每人即可獲得一塊鳳梨酥及茶水 &nbsp;</span></td>
			<td><span style="line-height: 20.8px;">&nbsp; 鳳梨酥販賣的場所</span></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>

建議修改:

第 205-266 行 修改 div style=“min-height: .01%;overflow-x: auto;”
<div style="
    min-height: .01%;
    overflow-x: auto;
">
<table border="0" cellpadding="1" cellspacing="1" style="width:500px;">
	<tbody>
		<tr>
			<td><img alt="遊客自行騎乘自行車" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image001(80).jpg" style="width: 250px; height: 188px;"></td>
			<td><img alt="遊客合照" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/IMAG2743.jpg" style="line-height: 20.8px; width: 250px; height: 189px;"></td>
		</tr>
		<tr>
			<td><span style="line-height: 20.8px;">遊客自行騎乘自行車至鳳鳴社區</span></td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><img alt="鳳鳴社區提供遊客的早市" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image003(87).jpg" style="width: 250px; height: 188px;"></td>
			<td><img alt="鳳鳴社區在地好吃的早餐" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image004(34).jpg" style="width: 250px; height: 188px;"></td>
		</tr>
		<tr>
			<td>
			<p style="line-height: 20.8px;">鳳鳴社區提供遊客的早市 &nbsp;</p>
			</td>
			<td>
			<p style="line-height: 20.8px;">鳳鳴社區在地好吃的早餐</p>

			<p style="line-height: 20.8px;">&nbsp;</p>
			</td>
		</tr>
		<tr>
			<td><img alt="每年一度的路跑賽事" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image005(88).jpg" style="width: 250px; height: 140px;"></td>
			<td><img alt="由鳳鳴社區製作的完賽證明" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image006(23).jpg" style="width: 250px; height: 140px;"></td>
		</tr>
		<tr>
			<td>
			<p style="line-height: 20.8px;">每年一度的路跑賽事 &nbsp; &nbsp; &nbsp;&nbsp;</p>
			</td>
			<td>
			<p style="line-height: 20.8px;">&nbsp;由鳳鳴社區製作的完賽證明</p>
			</td>
		</tr>
		<tr>
			<td><img alt="微熱山丘大門處" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image007(65).jpg" style="width: 250px; height: 141px;"></td>
			<td><img alt="微熱山丘以閩式建築搭建" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image008(19).jpg" style="width: 250px; height: 141px;"></td>
		</tr>
		<tr>
			<td>
			<p style="line-height: 20.8px;">微熱山丘大門處 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p>
			</td>
			<td>
			<p style="line-height: 20.8px;">微熱山丘以閩式建築搭建</p>
			</td>
		</tr>
		<tr>
			<td><img alt="入園每人即可獲得一塊鳳梨酥及茶水 " src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image009(57).jpg" style="width: 250px; height: 141px;"></td>
			<td><img alt="  鳳梨酥販賣的場所" src="https://rural.swcb.gov.tw/Images/d_upload_rural/cms/webEdit/A0/B0/C0/D0/E0/F0/images/image010(17).jpg" style="width: 250px; height: 141px;"></td>
		</tr>
		<tr>
			<td><span style="line-height: 20.8px;">入園每人即可獲得一塊鳳梨酥及茶水 &nbsp;</span></td>
			<td><span style="line-height: 20.8px;">&nbsp; 鳳梨酥販賣的場所</span></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table></div>

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

圖片畫質粗劣

建議修改:

請重新上傳高畫質圖檔

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

介面設計問題

建議修改:

補充

結尾(選填,可增加網站建議) (edited)