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

網站

臺灣青年FUN眼世界

姓名

盧苡萱

檢測日期

2018-04-25

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度(手機螢幕)

375x667

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

壞掉的連結

跑版(影響閱讀)問題

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


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


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


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

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

出現亂碼

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

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

閱讀模式

不可以用

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

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

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

1個讚

問題:

可能原因:

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)

結尾:

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

問題:

可能原因:

長英文沒有自動換行

原始程式:

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

建議修改:

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

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

補充:

aspx_n=C60222ACEB170E83&s=CA60F31A88AF3736(iPhone 6_7_8)


問題:

可能原因:

字過多換行

原始程式:

位置: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)

問題:

可能原因:

長英文沒有自動換行

原始程式:

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

建議修改:

在css中加上word-break屬性

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

補充:

aspx_n=2C28D363038C300F&s=C8DDDFC23B5106E8(iPhone 6_7_8)

問題:

可能原因:

背景圖位置設置錯誤

原始程式:

位置:教育部青年發展署「 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;
	}
}

補充:

aspx_n=C87DBAD8E7B8A8E3&sms=3FD9225F007C03C1&s=230AA315D5E0FCBB(iPhone 6_7_8)

問題:

可能原因:

圖片長寬被寫死

原始程式:

位置:臺灣青年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%">

補充:

aspx_n=ABBF62618F53F8DE&sms=583E73F632C8161E&s=47102889CDE6B3EB(iPhone 6_7_8)