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

ray 文化部
, ,
#1

網站

文化部國立歷史博物館

姓名

吳姿瑩

檢測日期

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

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

無障礙專區可加入行動版

國防部政治作戰局-吳姿瑩
#2

問題：

可能原因：

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

原始程式：

  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

#3

問題：

可能原因：

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

#4

問題：

可能原因：

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

原始程式：

位置： 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

#5

問題：

可能原因：

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

原始程式：

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