兒童權利公約資訊網-盧苡萱

網站

兒童權利公約資訊網

姓名

盧苡萱

檢測日期

2018-05-22

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度(手機螢幕)

375x667

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

壞掉的連結

跑版(影響閱讀)問題

[color=red]文字跑版[/color] (解法回文連結)


[color=red]圖片跑版[/color] (解法回文連結)


[color=red]網頁跑版[/color] (解法回文連結)

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

出現亂碼

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

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

閱讀模式

不可以用

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

[color=red]圖片畫素太低[/color] (解法回文連結)

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

[color=red]跑版問題有點嚴重[/color]

[color=red]網頁設計符合主題,充滿童心[/color]

1個讚

問題:

可能原因:

非程式問題

原始程式:

位置:http://crc.sfaa.gov.tw/crc_front/index.php :593

<p>
	......
	衛生福利部社會及家庭署本部:115臺北市南港區忠孝東路六段488號12樓(衛生福利大樓12樓)|02-26531776 | <a style="color: rgb(199, 0, 0);" href="https://www.google.com.tw/maps/place/115%E5%8F%B0%E5%8C%97%E5%B8%82%E5%8D%97%E6%B8%AF%E5%8D%80%E5%BF%A0%E5%AD%9D%E6%9D%B1%E8%B7%AF%E5%85%AD%E6%AE%B5488%E8%99%9F/@25.0502998,121.5931827,17z/data=!3m1!4b1!4m5!3m4!1s0x3442ab6ff5b0f59b:0x202272c4c6a1fcee!8m2!3d25.0502998!4d121.5953714?hl=zh-TW" target="_blank" title="署本部位置圖(另開新視窗)" tabindex="98">署本部位置圖</a>
</p>

建議修改:

<p>
	......
	<span>衛生福利部社會及家庭署本部:</span>
	<ul>
		<li>115臺北市南港區忠孝東路六段488號12樓(衛生福利大樓12樓)</li>
		<li>02-26531776</li>
		<li><a style="color: rgb(199, 0, 0);" href="https://www.google.com.tw/maps/place/115%E5%8F%B0%E5%8C%97%E5%B8%82%E5%8D%97%E6%B8%AF%E5%8D%80%E5%BF%A0%E5%AD%9D%E6%9D%B1%E8%B7%AF%E5%85%AD%E6%AE%B5488%E8%99%9F/@25.0502998,121.5931827,17z/data=!3m1!4b1!4m5!3m4!1s0x3442ab6ff5b0f59b:0x202272c4c6a1fcee!8m2!3d25.0502998!4d121.5953714?hl=zh-TW" target="_blank" title="署本部位置圖(另開新視窗)" tabindex="98">署本部位置圖</a></li>
	</ul>
</p>

補充:

php(iPhone 6_7_8) (1)


問題:

可能原因:

強制不換行

原始程式:

以 首頁>推動CRC>CRC 為例
位置:http://crc.sfaa.gov.tw/crc_front/index.php?action=classification&uuid=b0343766-f4d9-4357-b8c5-f05c26b410ec :291

<div class="article_list">
	<div class="row classification_box">
		<div class="col-md-12 col-sm-12 col-xs-12 m-b-10">
			<div class="media_class_1"></div>
			<div class="media_class_2"></div>
			<div class="media">
				<div class="media-body">
					<a href="./index.php?action=content&amp;uuid=ec5944d9-04ab-480c-aa4c-8dcc1b2e16dc" title="兒童權利公約_英文版(Convention on the Rights of the Child_English)" tabindex="52"><h4 class="media-heading">兒童權利公約_英文版(Convention on the Rights of the Child_English)</h4></a>
					<p class="article_list_p">......</p>
					<p class="article_list_eye"><i class="fa fa-clock-o " aria-hidden="true"></i> 2017-10-11</p>
				</div>
			</div>
		</div>
	</div>
	<div class="row classification_box">
		<div class="col-md-12 col-sm-12 col-xs-12 m-b-10">
			<div class="media_class_1"></div>
			<div class="media_class_2"></div>
			<div class="media">
				<div class="media-body">
					<a href="./index.php?action=content&amp;uuid=f84302b6-0dc0-40c9-bfa6-c9dfa95a2e33" title="兒童權利公約_中文版(Convention on the Rights of the Child_Chinese)" tabindex="53"><h4 class="media-heading">兒童權利公約_中文版(Convention on the Rights of the Child_Chinese)</h4></a>
					<p class="article_list_p">......</p>
					<p class="article_list_eye"><i class="fa fa-clock-o " aria-hidden="true"></i> 2017-10-11</p>
				</div>
			</div>
		</div>
	</div>
</div>

位置:http://crc.sfaa.gov.tw/crc_front/css/main.css :8743

.article_list .classification_box .media_class_1 {
	border-left: 4px solid #F8837A;
	position: absolute;
	left: 14px;
	height: 50px;
	top: -8px;
}
.article_list .classification_box .media_class_2 {
	border-left: 4px solid #f0e726;
	position: absolute;
	left: 14px;
	height: 61px;
	top: 38px;
}

位置:http://crc.sfaa.gov.tw/crc_front/css/main.css :10488

@media only screen and (max-width: 480px) and (min-width: 320px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

位置:http://crc.sfaa.gov.tw/crc_front/css/main.css :10785

@media only screen and (max-width: 768px) and (min-width: 0px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

建議修改:

<div class="article_list">
	<div class="row classification_box">
		<div class="col-md-12 col-sm-12 col-xs-12 m-b-10">
			<div class="media_class_1">
				<div class="media">
					<div class="media-body">
						<a href="./index.php?action=content&amp;uuid=ec5944d9-04ab-480c-aa4c-8dcc1b2e16dc" title="兒童權利公約_英文版(Convention on the Rights of the Child_English)" tabindex="52"><h4 class="media-heading">兒童權利公約_英文版(Convention on the Rights of the Child_English)</h4></a>
					</div>
				</div>
			</div>
			<div class="media_class_2">
				<div class="media">
					<div class="media-body">
						<p class="article_list_p">......</p>
						<p class="article_list_eye"><i class="fa fa-clock-o " aria-hidden="true"></i> 2017-10-11</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row classification_box">
		<div class="col-md-12 col-sm-12 col-xs-12 m-b-10">
			<div class="media_class_1">
				<div class="media">
					<div class="media-body">
						<a href="./index.php?action=content&amp;uuid=f84302b6-0dc0-40c9-bfa6-c9dfa95a2e33" title="兒童權利公約_中文版(Convention on the Rights of the Child_Chinese)" tabindex="53"><h4 class="media-heading">兒童權利公約_中文版(Convention on the Rights of the Child_Chinese)</h4></a>
					</div>
				</div>
			</div>
			<div class="media_class_2">
				<div class="media">
					<div class="media-body">
						<p class="article_list_p">......</p>
						<p class="article_list_eye"><i class="fa fa-clock-o " aria-hidden="true"></i> 2017-10-11</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

刪除不必要的位置設置

.article_list .classification_box .media_class_1 {
	border-left: 4px solid #F8837A;
}
.article_list .classification_box .media_class_2 {
	border-left: 4px solid #f0e726;
}

刪除white-space屬性

@media only screen and (max-width: 480px) and (min-width: 320px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media only screen and (max-width: 768px) and (min-width: 0px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

補充:

php_action=classification&uuid=b0343766-f4d9-4357-b8c5-f05c26b410ec(iPhone 6_7_8) (1)

可能原因:

區塊寬度設置錯誤

原始程式:

位置:http://crc.sfaa.gov.tw/crc_front/css/main.css :10488

@media only screen and (max-width: 480px) and (min-width: 320px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.w20 {
		width: 20%;
	}
}

位置:http://crc.sfaa.gov.tw/crc_front/css/main.css :10785

@media only screen and (max-width: 768px) and (min-width: 0px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.w20 {
		width: 20%;
	}
}

建議修改:

刪除寬度限制及white-space屬性

@media only screen and (max-width: 480px) and (min-width: 320px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media only screen and (max-width: 768px) and (min-width: 0px){
	.classification_box .media-body h4.media-heading {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

在css中加上width屬性

.classification_box a{
	width:100%;
}

補充:

php_action=classification&uuid=e32bf378-faac-44ba-9593-b53c4f9de5c8(iPhone 6_7_8)

問題:

可能原因:

表格內容過多

原始程式:

位置:http://crc.sfaa.gov.tw/crc_front/css/main.css :6777

.members_table_box table tbody.members_box .currentpost.resume {
	position: absolute;
}

建議修改:

刪除position屬性

.members_table_box table tbody.members_box .currentpost.resume {
}

在css中加上overflow屬性

.members_table_box {
	overflow:  scroll;
}

補充:

表格向左拖曳之示意圖
php_action=member(iPhone 6_7_8)

問題:

可能原因:

圖片解析不夠

原始程式:

位置:http://crc.sfaa.gov.tw/crc_front/index.php?action=content&uuid=ec46d189-9957-4208-863c-3f42de6d8c52

建議修改:

已測試,非程式問題,可點開查看原圖