國立歷史博物館---吳姿瑩

網站

文化部國立歷史博物館

姓名

吳姿瑩

檢測日期

2018-04-26

檢測裝置

Samsung Galaxy A8 SM-A530F

作業系統 與 瀏覽器版本

Android 7.1.1
Chrome版本:Chrome 61.0.3163.98

解析度(手機螢幕)

360X740 Pixels

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

壞掉的連結

  • 首頁
    點選首頁圖片無法連結置行動版頁面
    歷史
    歷史2

*首頁>參觀>交通資訊
連結無法連結行動版
歷史4


*首頁>服務>報名申請
下載點無法下載
歷史11


跑版(影響閱讀)問題

*首頁>服務>服務信箱>進度查詢
標題文字格是跑版 解法回文連結
歷史3


*首頁>參觀>交通資訊
文字空格不一致 解法回文連結
歷史5


*首頁>參觀>樓層導覽
文字跑版或是可加入日期或項目符號讓整個看起來一致
歷史6


*首頁>展覽>展覽回顧
圖片及文字跑版,每個回顧點進去都會跑 解法回文連結
歷史9


*首頁>活動>活動成果
圖片跑版 解法回文連結
歷史10


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

出現亂碼

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

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

閱讀模式

我是安卓

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

首頁>服務>服務引導
日期未照順序排列
歷史12


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

無障礙專區可加入行動版

問題:

可能原因:

螢幕縮放後,標題寬度過窄,導致跑版。

原始程式:

  1. list標籤,位置: view-source:國立歷史博物館
    416行
<li>
  <div>                            
    <div style="float:left; width:20%"><span class="red">*</span>編&nbsp;&nbsp; 號 :</div>
    <div id="sn" class="text0804_preview"></div>
    <div style="float:left; width:70%">
      <input name="ctl00$oCPH_Content$oF_SN" maxlength="40" id="ctl00_oCPH_Content_oF_SN" class="text0804 ui-widget-content" rel="name" required="true" type="text">
    </div>
  </div>
</li>
  1. list CSS,位置:國立歷史博物館
@media screen and (max-width: 767px)
.c05_mid .list08 .word .ul0804 li .text0804 {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #e5e5e5;
    color: #000;
    margin-left: 0px;
    margin-right: 0px;
}

建議修改:

  1. 簡化list標籤裡的div。
<li>                          
  <span class="red">*</span>編&nbsp;&nbsp; 號 :
  <input name="ctl00$oCPH_Content$oF_SN" maxlength="40" id="ctl00_oCPH_Content_oF_SN" class="text0804 ui-widget-content" rel="name" required="true" type="text">
</li>

2.將list寬度改成50%。

@media screen and (max-width: 767px)
.c05_mid .list08 .word .ul0804 li .text0804 {
    width: 50%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #e5e5e5;
    color: #000;
    margin-left: 0px;
    margin-right: 0px;
}

補充:

(修正後之截圖)
15

問題:

可能原因:

原始表格文字置中顯示,導致螢幕縮放時開頭空格不一致,此為正常顯示。

問題:

可能原因:

文字與上方圖片間隔過窄,導致螢幕縮放時重疊。

原始程式:

位置: view-source:國立歷史博物館
484行

<div style="height: 150px;margin-top: 25px;font-size:15px;font-family:Arial, '微軟正黑體';line-height:24px;" id="cation">
  巴黎聖母院  1968<br>Notre Dame de Paris<br>61 x 50 cm
</div>

建議修改:

<div style="height: 150px;margin-top: 50px;font-size:15px;font-family:Arial, '微軟正黑體';line-height:24px;" id="cation">
  巴黎聖母院  1968<br>Notre Dame de Paris<br>61 x 50 cm
</div>

補充:

(修正後之截圖)
16

問題:

可能原因:

圖片靠上顯示,導致窄長的圖片下方留白區域過大。

原始程式:

1.圖片外層div的CSS,位置: 國立歷史博物館

@media screen and (max-width: 767px)
.list_03 .box .pic {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 80.6%;
    float: left;
    margin-bottom: 15px;
    overflow: hidden;
}
  1. 圖片的CSS,位置:國立歷史博物館
@media screen and (max-width: 767px)
.list_03 .box .pic img {
    width: 100%;
    height: auto;
}

建議修改:

將圖片置中顯示,以下為作法:
1.在圖片外層div標籤中加入line-height: 261px;

@media screen and (max-width: 767px)
.list_03 .box .pic {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 80.6%;
    float: left;
    margin-bottom: 15px;
    overflow: hidden;
    line-height: 261px;
}
  1. 在圖片標籤中加入vertical-align: middle;
@media screen and (max-width: 767px)
.list_03 .box .pic img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

補充:

(修正後之截圖)
17