臺灣青年FUN眼世界-盧苡萱

ray 外交部
, ,
#1

網站

臺灣青年FUN眼世界

姓名

盧苡萱

檢測日期

2018-04-25

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度（手機螢幕）

375x667

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

是

壞掉的連結

無

跑版（影響閱讀）問題

文字跑版 (解法回文連結)

表格跑版 (解法回文連結)

網頁跑版 (解法回文連結)

圖片跑版 (解法回文連結)

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

無

出現亂碼

無

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

無

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

無

閱讀模式

不可以用

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

無

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

建議若點進去會新開視窗，應在旁標明

1 Like
#2

問題：

可能原因：

padding推擠區塊超出版面

原始程式：

以 首頁>外交小尖兵>歷屆小尖兵>第15屆種子隊 為例
位置：https://www.youthtaiwan.net/teendiplomatic/css/detail.css :1

@media (max-width: 768px) and (min-width: 1px) {
	.past_content .main_des .main_des_content {
		width:100%;
		padding-top: 20px;
		padding-left: 20px;
	}
}

建議修改：

加上box-sizing屬性(或是刪除此div寬度限制也可以~)

@media (max-width: 768px) and (min-width: 1px) {
	.past_content .main_des .main_des_content {
		width:100%;
		padding-top: 20px;
		padding-left: 20px;
		box-sizing: border-box;
	}
}

補充：

aspx_n=A2483689787CA81F&sms=4FF16938B345DC3F&s=ECCAEED854516EE4(iPhone 6_7_8)
www.youthtaiwan.net_teendiplomatic_Cus_Teendiplomatic.aspx_n=A2483689787CA81F&sms=4FF16938B345DC3F&s=ECCAEED854516EE4(iPhone 6_7_8).jpg750×1334 278 KB

結尾：

  • 除了14、15屆以外其他屆的網頁也有此問題！

問題：

可能原因：

長英文沒有自動換行

原始程式：

位置：https://www.youthtaiwan.net/youthambassadors/cp.aspx?n=C60222ACEB170E83&s=CA60F31A88AF3736

建議修改：

在css中加上word-break屬性(或是直接將連結設置在文字上，就不會有網址將表格撐開的問題)

a{
	word-break: break-all;
	/* 如果希望網址自己一行 */
	display: block;
}

補充：

aspx_n=C60222ACEB170E83&s=CA60F31A88AF3736(iPhone 6_7_8)
www.youthtaiwan.net_youthambassadors_cp.aspx_n=C60222ACEB170E83&s=CA60F31A88AF3736(iPhone 6_7_8).png750×1334 87.6 KB

問題：

可能原因：

字過多換行

原始程式：

位置：https://www.youthtaiwan.net/WorkingHoliday/Cus_WHNation.aspx?n=4892E8B8F5C0E174&s=7583964E4062DA65 :658

<p>
	......
	E-mail：Taipei_Ceco@mzv.cz（一般事務查詢）<br>
	&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; taipei_consul@mzv.cz（領事事務查詢）<br>
	&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; commerce_taipei@mzv.cz（商業事務查詢）<br>
	......
</p>

建議修改：

已測試，非跑版問題

<p>
	......
	E-mail：
	&nbsp; Taipei_Ceco@mzv.cz（一般事務查詢）<br>
	&nbsp; taipei_consul@mzv.cz（領事事務查詢）<br>
	&nbsp; commerce_taipei@mzv.cz（商業事務查詢）<br>
	......
</p>

補充：

aspx_n=4892E8B8F5C0E174&s=7583964E4062DA65(iPhone 6_7_8)
www.youthtaiwan.net_WorkingHoliday_Cus_WHNation.aspx_n=4892E8B8F5C0E174&amp;s=7583964E4062DA65(iPhone 6_7_8).png750×1334 107 KB

#3

問題：

可能原因：

長英文沒有自動換行

原始程式：

以 首頁>青年度假打工>安全與權益保障>申訴專區>愛爾蘭 為例
位置：https://www.youthtaiwan.net/WorkingHoliday/Cus_WHAppeal.aspx?n=2C28D363038C300F&s=C8DDDFC23B5106E8

建議修改：

在css中加上word-break屬性

td,th{
	word-break: break-word;
}

補充：

aspx_n=2C28D363038C300F&s=C8DDDFC23B5106E8(iPhone 6_7_8)
www.youthtaiwan.net_WorkingHoliday_Cus_WHAppeal.aspx_n=2C28D363038C300F&amp;s=C8DDDFC23B5106E8(iPhone 6_7_8).png750×1334 86.5 KB

#4

問題：

可能原因：

背景圖位置設置錯誤

原始程式：

位置：https://www.youthtaiwan.net/News_Content.aspx?n=C87DBAD8E7B8A8E3&sms=3FD9225F007C03C1&s=230AA315D5E0FCBB :514

<div id="content" class="content">
	......
</div>

位置：https://www.youthtaiwan.net/css/index.css :1

@media (max-width: 800px) and (min-width: 481px) {
	body>form {
		background-color:#fff;
		background-image: url('../images/pad_bg.jpg?1513902846');
		background-repeat: no-repeat;
		background-position: center 4%;
		background-size: contain
	}
}

@media (max-width: 480px) and (min-width: 1px) {
	body>form {
		background-color:#fff;
		background-image: url('../images/pad_bg.jpg?1513902846');
		background-repeat: no-repeat;
		background-position: center 7%;
		background-size: contain
	}
}

@media (max-width: 800px) and (min-width: 769px) {
	.content .content_middle {
		margin-top:58%
	}
}

@media (max-width: 768px) and (min-width: 661px) {
	.content .content_middle {
		margin-top:52%
	}
}

@media (max-width: 660px) and (min-width: 581px) {
	.content .content_middle {
		margin-top:52%
	}
}

@media (max-width: 580px) and (min-width: 481px) {
	.content .content_middle {
		margin-top:46%
	}
}

@media (max-width: 480px) and (min-width: 1px) {
	.content .content_middle {
		margin-top:56%
	}
}

位置：https://www.youthtaiwan.net/css/detail.css :1

@media (max-width: 800px) and (min-width: 769px) {
	.content .content_middle {
		margin-top:61%
	}
}

@media (max-width: 768px) and (min-width: 661px) {
	.content .content_middle {
		margin-top:385px
	}
}

@media (max-width: 660px) and (min-width: 481px) {
	.content .content_middle {
		margin-top:45%
	}
}

@media (max-width: 480px) and (min-width: 321px) {
	.content .content_middle {
		margin-top:54%
	}
}

@media (max-width: 320px) and (min-width: 1px) {
	.content .content_middle {
		margin-top:58%
	}
}

建議修改：

使用img標籤取代使用background-image屬性

<div id="content" class="content">
	<img src="../images/pad_bg.jpg?1513902846" class="bg">
	......
</div>

img .bg{
	display: none;
}

@media (max-width: 800px) {
	body>form {
		background-color:#fff;
		background-image: none;
	}
	img .bg{
		max-width: 100%
		display: unset;
	}
}

變更margin-top屬性值

@media (max-width: 800px) {
	.content .content_middle {
		margin-top: unset;
	}
}

@media (max-width: 800px) and (min-width: 769px) {
	.content .content_middle {
		margin-top: unset;
	}
}

補充：

aspx_n=C87DBAD8E7B8A8E3&sms=3FD9225F007C03C1&s=230AA315D5E0FCBB(iPhone 6_7_8)
www.youthtaiwan.net_News_Content.aspx_n=C87DBAD8E7B8A8E3&amp;sms=3FD9225F007C03C1&amp;s=230AA315D5E0FCBB(iPhone 6_7_8).jpg750×1334 239 KB

#5

問題：

可能原因：

圖片長寬被寫死

原始程式：

位置：https://www.youthtaiwan.net/News_Content.aspx?n=ABBF62618F53F8DE&sms=583E73F632C8161E&s=47102889CDE6B3EB :645

<img alt="臺灣獎助金橫幅廣告" src="https://funfj.youthtaiwan.net/001/mofafun/1/ckfile/8dc21fbd-76d1-4301-85cc-75d1ddda892f.jpg" style="width: 680px; height: 270px;">

建議修改：

<img alt="臺灣獎助金橫幅廣告" src="https://funfj.youthtaiwan.net/001/mofafun/1/ckfile/8dc21fbd-76d1-4301-85cc-75d1ddda892f.jpg" style="max-width: 100%">

補充：

aspx_n=ABBF62618F53F8DE&sms=583E73F632C8161E&s=47102889CDE6B3EB(iPhone 6_7_8)
www.youthtaiwan.net_News_Content.aspx_n=ABBF62618F53F8DE&amp;sms=583E73F632C8161E&amp;s=47102889CDE6B3EB(iPhone 6_7_8).jpg750×1334 197 KB