國立臺灣圖書館-高偉庭

網站

國立臺灣圖書館

姓名

高偉庭

檢測日期

2018-04-14

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本:Chrome 64.0.3325.109

解析度(手機螢幕)

360x640 pixels

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

壞掉的連結

  1. 首頁>認識本館>志工園地>訊息公告>憑榮譽卡可免費進入公立景點及文教設施一覽表
  2. 首頁>認識本館>志工園地>網網相連>衛生福利部志願服務資訊網
  3. 首頁>認識本館>志工園地>網網相連>新北市政府社會局_佈老志工
  4. 首頁>認識本館>臺灣圖書醫院>相關網站>國立臺南藝術大學博物館學與古物維謢研究所
  5. 首頁 活動訊息 特展歷史資料區
    每一個點進去都會顯示過期網頁
    2018-04-14_153546
  6. 首頁 >讀者服務 >網路資源 >網路搜尋引擎>TWNIC

跑版(影響閱讀)問題

  1. 首頁
    如果排成一排會比較好解法回文連結

  1. 首頁>認識本館>本館介紹>開放時間
    首頁>認識本館>本館介紹>組織架構>人事室
    首頁>認識本館>本館介紹>組織架構>主計室
    首頁>認識本館>本館出版品>政府出版品寄存服務
    首頁>認識本館>志工園地>訊息公告>教育訊練_線上報名
    [首頁>讀者服務>自修排隊及使用須知)(https://www.ntl.edu.tw/np.asp?ctNode=1746&CtUnit=134&BaseDSD=7&mp=1)
    表格顯示不完全解法回文連結
    2018-04-14_142508

  1. 首頁 >認識本館> 本館介紹> 歷史沿革
    圖片很小,排版不太適合看解法回文連結
    2018-04-14_142716

  1. 首頁>認識本館>本館出版品>出版品訂購資訊
    首頁> 我想要… >購買影印卡
    表格文字不好閱讀解法回文連結
    2018-04-14_143815

  1. 首頁>資源探索>館藏資源>新書介紹
    館藏查詢按紐的文字如果排成一行會比較好解法回文連結
    2018-04-14_153756

  1. 首頁 >我想要… >申請展覽.攝影.公共服務等 >申請展覽「雙和藝廊」
    [首頁>臺灣學研究中心>首頁 >研究支援 >博碩士論文研究獎助
    文字排版跑掉解法回文連結

  1. 首頁>臺灣學研究中心>首頁 >公布欄 >活動報導(其中每一項)
    圖片排版跑掉解法回文連結

  1. 首頁>臺灣學研究中心>首頁 >館藏臺灣學研究書展 >行動展覽館>您是否對於「行動展覽館」是什麼,感到好奇呢?
    圖片顯示不完全解法回文連結

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

出現亂碼

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

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

閱讀模式

不適用

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

  1. 首頁>閱讀推廣與館藏充實計畫
    首頁>線上演講廳
    首頁>親子資料中心
    首頁>日文語
    首頁>English
    沒有手機版網站

  1. 首頁>認識本館>志工園地>網網相連
    圖片被壓縮解法回文連結
    2018-04-14_145002

  1. 首頁>公布欄>遺失物專區
    圖片顯示不出來

  1. 首頁>資源探索>館藏資源>新書介紹
    點入每本書的詳全文後跳轉的頁面如果也能有館藏查詢按紐會更方便

  1. 首頁 >讀者服務 >網路資源 >網路搜尋引擎>TWNIC
    GOOGLE重覆兩次

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

排版舒服、適合閱讀
頁首最上方左右都有可點開的欄位,我覺得可能留一個就好,比較不會混淆
手機版不會顯示麵包屑,容易讓讀者不知道自己現在在的網頁是怎麼點進來的

問題:

可能原因:

按鈕寬度為25%,因此顯示為四個一排。

原始程式:

位置:https://www.ntl.edu.tw/GIPDSD/xslGip/xslExport/1/1/css/layout.css

@media (max-width: 767px)
.Social .Items {
    width: 25%;
    float: left;
    padding-left: 0px;
    padding-right: 0px;
}

建議修改:

將按鈕寬度改為20%。

@media (max-width: 767px)
.Social .Items {
    width: 20%;
    float: left;
    padding-left: 0px;
    padding-right: 0px;
}

補充:

(修正後截圖)

問題:

可能原因:

表格結構未因應行動版面做變化,不易閱讀。

建議修改:

如要方便使用者閱讀,需將表格結構重新排列,參考解法:行政院農業委員會-林文琦

問題:

可能原因:

圖片寬度設定符合電腦版,但轉移至行動版時,圖片過小,未將行動版瀏覽感受列入考慮。

原始程式:

  1. 位置:https://www.ntl.edu.tw/GIPDSD/xslGip/xslExport/1/1/css/theme.css:1114
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}
  1. 放置圖片的<table> </table>
<table>
  <tbody>
    <tr>
      <td><img class="img-responsive" src="../site/ntl/public/MMO/GIP2/1-1pic01.gif" alt="臺灣總督府圖書館(1915-1945)"></td>
      <td><img class="img-responsive" src="../site/ntl/public/MMO/GIP2/B2臺灣省行政長官公署圖書館.jpg" alt="B2-臺灣省行政長官公署圖書館" width="45%"></td>
    </tr>
  </tbody>
</table>

建議修改:

  1. max-width改為width
    位置:https://www.ntl.edu.tw/GIPDSD/xslGip/xslExport/1/1/css/theme.css:1114
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    width: 100%;
    height: auto;
}
  1. 將放置圖片的<table> </table>裡的<td>寬度改為50%。
<table>
  <tbody>
    <tr>
      <td width="50%"><img class="img-responsive" src="../site/ntl/public/MMO/GIP2/1-1pic01.gif" alt="臺灣總督府圖書館(1915-1945)"></td>
      <td width="50%"><img class="img-responsive" src="../site/ntl/public/MMO/GIP2/B2臺灣省行政長官公署圖書館.jpg" alt="B2-臺灣省行政長官公署圖書館" width="45%"></td>
    </tr>
  </tbody>
</table>

補充:

(修正後截圖)

問題:

可能原因:

  1. 放置按鈕的<span></span>寬度設置固定。
  2. 按鈕寬度設定固定。

原始程式:

  1. span的class
    位置:https://www.ntl.edu.tw/GIPDSD/xslGip/xslExport/1/1/css/layout.css:1483
.Btn_wrap {
    float: right;
    width: 150px;
}
  1. 按鈕連結的class
    位置:https://www.ntl.edu.tw/GIPDSD/xslGip/xslExport/1/1/css/layout.css:1493
.Btn_wrap a {
    display: inline-block;
    width: 70px;
    text-align: center;
}

建議修改:

  1. 將span的寬度設定移除。
    位置:https://www.ntl.edu.tw/GIPDSD/xslGip/xslExport/1/1/css/layout.css:1483
.Btn_wrap {
    float: right;
}
  1. 將按鈕連結的寬度設定移除。
    位置:https://www.ntl.edu.tw/GIPDSD/xslGip/xslExport/1/1/css/layout.css:1493
.Btn_wrap a {
    display: inline-block;
    text-align: center;
}

補充:

(修正後截圖)

問題:

可能原因:

用空格將文字強制置中,段落寬度在電腦版顯示沒問題,但轉換至行動版網頁會因寬度較窄而跑版。

原始程式:

<p>申請時間:每年1-3月申請次年1-6檔期,7-9月申請次年7-12月檔期<br>申請流程:</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;下載申請書</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <strong>↓</strong></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;填寫完整並檢附作品圖片至少10張及相關資料(若有作品集可一併提供)</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 另請將簡歷及作品作成PPT(若檔案過大請轉成PDF)</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <strong>↓&nbsp;&nbsp;</strong></p>
.
.
.
(以下省略)

建議修改:

將空格移除,文字靠左顯示。

<h4>申請展覽方式</h4>
<p>申請時間:每年1-3月申請次年1-6檔期,7-9月申請次年7-12月檔期<br>申請流程:</p>
<p style="text-align: left;">1. 下載申請書</p>
<p><strong>↓</strong></p>
<p>2. 填寫完整並檢附作品圖片至少10張及相關資料(若有作品集可一併提供)</p>
<p>另請將簡歷及作品作成PPT(若檔案過大請轉成PDF)</p>
<p><strong>↓&nbsp;&nbsp;</strong></p>

<p>3. 請mail至<a href="mailto:cls@mail.ntl.edu.tw">cls@mail.ntl.edu.tw</a>&nbsp;</p>
<p>或寄送至本館企劃推廣組(新北市中和區中安街85號6F)<br></p>
<p><strong>↓</strong></p>
<p>4. 收件截止後安排展覽審查並排定檔期</p>
<p><strong>↓</strong></p>
<p>5. 通知申請者審查結果<br>(上半年檔期於5月底前公布,下班年檔期於11月底前公布)</p>
<p>承辦人:(02)2926-6888分機5416&nbsp; 程小姐</p>

補充:

(修正後截圖)

問題:

可能原因:

表格及圖片寬度為固定數值,導致跑版。

原始程式:

<table style="height: 353px; width: 709px;" border="0">
<tbody>
<tr>
<td><img src="../site/ntl/public/MMO/GIP2/1521619366344.jpg" alt="高雄展開幕3" width="322" height="253"></td>
<td><img src="../site/ntl/public/MMO/GIP2/1521619367749.jpg" alt="高雄展開幕4" width="326" height="245"></td>
</tr>
<tr>
<td>高雄市政府文化局林副局長、新北市立圖書館王館長、高雄市立圖書館潘館長、本館鄭館長等多位貴賓共同參與本特展開幕式</td>
<td>高雄市立圖書館潘館長、本館鄭館長接受高雄在地新住民電台專訪</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><img src="../site/ntl/public/MMO/GIP2/1521619363386.jpg" alt="高雄展開幕1" width="321" height="245"></td>
<td><img src="../site/ntl/public/MMO/GIP2/1521619365043.jpg" alt="高雄展開幕2" width="327" height="246"></td>
</tr>
<tr>
<td>開幕式邀請東南亞樂團現場演出,以音樂帶領讀者望見南方</td>
<td>新北市圖王館長、本館鄭館長、高雄市政府文化局林副局長及高雄市立圖書館潘館長一同拼出東南亞地圖,也揭開特展序幕</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

建議修改:

將表格以及圖片寬度改為百分比。

<table width="100%" border="0">
<tbody>
<tr>
<td width="50%"><img src="../site/ntl/public/MMO/GIP2/1521619366344.jpg" alt="高雄展開幕3" width="90%"></td>
<td width="50%"><img src="../site/ntl/public/MMO/GIP2/1521619367749.jpg" alt="高雄展開幕4" width="90%"></td>
</tr>
<tr>
<td>高雄市政府文化局林副局長、新北市立圖書館王館長、高雄市立圖書館潘館長、本館鄭館長等多位貴賓共同參與本特展開幕式</td>
<td>高雄市立圖書館潘館長、本館鄭館長接受高雄在地新住民電台專訪</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><img src="../site/ntl/public/MMO/GIP2/1521619363386.jpg" alt="高雄展開幕1" width="90%"></td>
<td><img src="../site/ntl/public/MMO/GIP2/1521619365043.jpg" alt="高雄展開幕2" width="90%"></td>
</tr>
<tr>
<td>開幕式邀請東南亞樂團現場演出,以音樂帶領讀者望見南方</td>
<td>新北市圖王館長、本館鄭館長、高雄市政府文化局林副局長及高雄市立圖書館潘館長一同拼出東南亞地圖,也揭開特展序幕</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

補充:

(修正後截圖)

問題:

可能原因:

圖片寬度為固定數值,導致跑版。

原始程式:

<img src="../site/ntl/public/MMO/GIP2/行動長覽館-修改圖.jpg" alt="105上大葉大學行動展" width="640" height="320">

建議修改:

將圖片寬度改為百分比。

<img src="../site/ntl/public/MMO/GIP2/行動長覽館-修改圖.jpg" alt="105上大葉大學行動展" width="100%">

補充:

(修正後截圖)

問題:

可能原因:

圖片原檔長寬比例不同,為求圖片長寬一致,故需壓縮圖片導致變形。