國立故宮博物院故宮教育頻道-姿瑩

網站

國立故宮博物院教育頻道

姓名

吳姿瑩

檢測日期

2018-05-13

檢測裝置

Samsung Galaxy A8 SM-A530F

作業系統 與 瀏覽器版本

Android 7.1.1
Chrome 61.0.3163.98

解析度(手機螢幕)

360X740 Pixels

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

壞掉的連結



跑版(影響閱讀)問題



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

出現亂碼

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

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

閱讀模式

我是安卓

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

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

歷年影片區影片數量達86個,雖有年度標籤,但建議可以新增頁數做分別,不然新使用者一次滑完滿耗時耗力。

問題:

可能原因:

表格內容間隔較窄,不易閱讀。

原始程式:

位置:view-source:http://npm.nchc.org.tw/el_1.aspx:102

<table width="96%" align="center">
	<tbody><tr valign="top">
		<td width="50%">
			<h2><span class="rank">1</span> 導論</h2>
			<table cellpadding="8" style="margin-left:20px;">
				<tbody><tr><td><a href="el_1_view.aspx?course=C01_1&amp;e_title=老祖宗的好腦筋-人類科技文明的里程碑">1 老祖宗的好腦筋-人類科技文明的里程碑</a></td></tr>

建議修改:

在選項間增加間隔,於各大標題下方的table中加入cellpadding="8"

<table width="96%" align="center">
	<tbody><tr valign="top">
		<td width="50%">
			<h2><span class="rank">1</span> 導論</h2>
			<table cellpadding="8" style="margin-left:20px;">
				<tbody><tr><td><a href="el_1_view.aspx?course=C01_1&amp;e_title=老祖宗的好腦筋-人類科技文明的里程碑">1 老祖宗的好腦筋-人類科技文明的里程碑</a></td></tr>

補充:

其餘頁面問題解法以此類推。
(修正後之截圖)

問題:

可能原因:

標題欄位寬度設置為百分比,導致斷行後,不易閱讀。

原始程式:

  1. "教案名稱"欄位CSS,位置:http://npm.nchc.org.tw/style.css:2550
@media screen and (max-width: 480px)
.list_item >.title {
    width: 84%;
}
  1. "教學資源內容"欄位CSS,位置:http://npm.nchc.org.tw/style.css:2559
@media screen and (max-width: 480px)
.list_item >.download {
    width: 10%;
}

建議修改:

更改標題寬度百分比。

  1. "教案名稱"欄位CSS,位置:http://npm.nchc.org.tw/style.css:2550
@media screen and (max-width: 480px)
.list_item >.title {
    width: 75%;
}
  1. "教學資源內容"欄位CSS,位置:http://npm.nchc.org.tw/style.css:2559
@media screen and (max-width: 480px)
.list_item >.download {
    width: 20%;
}

補充:

(修正後之截圖)