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

shannon110012 · 2018年04月25日13:15

網站

臺灣青年FUN眼世界

姓名

盧苡萱

檢測日期

2018-04-25

檢測裝置

iphone7

作業系統與瀏覽器版本

iOS11.2

解析度（手機螢幕）

375x667

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

是

壞掉的連結

無

跑版（影響閱讀）問題

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

首頁>外交小尖兵>歷屆小尖兵>第15屆種子隊

首頁>外交小尖兵>歷屆小尖兵>第14屆種子隊

首頁>國際青年大使>交流資源補給站>台灣美食

首頁>青年度假打工>國家資訊>度假打工資訊>捷克

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

首頁>青年度假打工>安全與權益保障>申訴專區>愛爾蘭

首頁>青年度假打工>安全與權益保障>申訴專區>波蘭

首頁>青年度假打工>安全與權益保障>申訴專區>捷克

首頁>青年度假打工>安全與權益保障>申訴專區>匈牙利

首頁>青年度假打工>安全與權益保障>申訴專區>韓國

首頁>青年度假打工>安全與權益保障>申訴專區>紐西蘭

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

首頁>青年國際參與>教育部青年發展署「 iYouth青年國際參與短片創作及徵文比賽」活動簡章

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

首頁>獎助學金>外交部臺灣獎助金（外國學人

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

無

出現亂碼

無

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

無

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

無

閱讀模式

不可以用

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

無

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

[color=red]建議若點進去會新開視窗，應在旁標明[/color]

YungYu · 2018年05月17日14:48

問題：

可能原因：

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

補充：

結尾：

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

問題：

可能原因：

長英文沒有自動換行

原始程式：

位置：國際青年大使-台灣美食

建議修改：

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

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

補充：

問題：

可能原因：

字過多換行

原始程式：

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

<p>
	......
	E-mail：[email protected]（一般事務查詢）<br>
	&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [email protected]（領事事務查詢）<br>
	&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [email protected]（商業事務查詢）<br>
	......
</p>

建議修改：

已測試，非跑版問題

<p>
	......
	E-mail：
	&nbsp; [email protected]（一般事務查詢）<br>
	&nbsp; [email protected]（領事事務查詢）<br>
	&nbsp; [email protected]（商業事務查詢）<br>
	......
</p>

補充：

YungYu · 2018年05月17日14:56

問題：

可能原因：

長英文沒有自動換行

原始程式：

以首頁>青年度假打工>安全與權益保障>申訴專區>愛爾蘭為例
位置：愛爾蘭

建議修改：

在css中加上word-break屬性

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

補充：

YungYu · 2018年05月17日17:14

問題：

可能原因：

背景圖位置設置錯誤

原始程式：

位置：教育部青年發展署「 iYouth青年國際參與短片創作及徵文比賽」活動簡章 :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;
	}
}

補充：

YungYu · 2018年05月17日17:18

問題：

可能原因：

圖片長寬被寫死

原始程式：

位置：臺灣青年FUN眼世界網站 :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%">

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

網站

姓名

檢測日期

檢測裝置

作業系統 與 瀏覽器版本

解析度（手機螢幕）

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

壞掉的連結

跑版（影響閱讀）問題

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

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

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

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

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

出現亂碼

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

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

閱讀模式

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

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

[color=red]建議若點進去會新開視窗，應在旁標明[/color]

問題：

可能原因：

原始程式：

建議修改：

補充：

結尾：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

作業系統與瀏覽器版本