台灣史前博物館--楊珣

網站

國立台灣史前文化博物館

姓名

楊珣

檢測日期

2018-04-24

檢測裝置

sony xperia ultra xa1

作業系統 與 瀏覽器版本

e.g. Android 7.0
Chrome版本:Chrome 66.0.3359.117

解析度(手機螢幕)

360x640pixels

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

壞掉的連結


跑版(影響閱讀)問題


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

出現亂碼

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

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

閱讀模式

使用andriod系統

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

  • 問題一 麵包屑的跑版 // 解法回文連結
    所有的麵包屑的排版都怪怪的
    擷取8

問題二 字好擠喔,看了覺得快窒息了 // 解法回文連結


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

  • 需要改進的地方
    1.行動版相較於網頁版陽春很多
    2.行動版的網頁導覽好難找喔。
    3.在發行公告時,可以留下標題作為連結,而非透過more的方式去進行文章的發展。
    4.公告可以進行更明確的分類,並在網頁上附上網頁分類的按鍵。(可參考文化部文化資產局的設計方式)
    5.覺得介面有點醜,可以重新設計嗎?

問題:

可能原因:

RWD 沒設定好

原始程式:

第 142-147 行
<ul class="breadcrumb">
    <a href="https://www.nmp.gov.tw/nmpmobile/index.php"><li>首頁</li></a>
    <a href="https://www.nmp.gov.tw/nmpmobile/exhibition/visit/nmp/info.php"><li>參觀資訊</li></a>
    <a href="https://www.nmp.gov.tw/nmpmobile/exhibition/visit/nmp/info.php"><li>康樂本館</li></a>
    <li class="last">參觀須知</li>
</ul>

建議修改:

第 142-147 行 修改為 p tag
<ul class="breadcrumb">
    <a href="https://www.nmp.gov.tw/nmpmobile/index.php">
        <li>
            <p style="display:  inline-block;font-size: 75%;color: #999;line-height: 25px;">首頁</p>
        </li>
    </a>
    <a href="https://www.nmp.gov.tw/nmpmobile/exhibition/visit/nmp/info.php">
        <li>
            <p style="display:  inline-block; font-size: 75%;color: #999;line-height: 25px;">參觀資訊</p>
        </li>
    </a>
    <a href="https://www.nmp.gov.tw/nmpmobile/exhibition/visit/nmp/info.php">
        <li>
            <p style="display:  inline-block;font-size: 75%;color: #999;line-height: 25px;">康樂本館</p>
        </li>
    </a>
    <li class="last">
        <p style="display:  inline-block;font-size: 75%;color: #999;line-height: 25px;">參觀須知</p>   
    </li>
</ul>

補充

image

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

排版問題

原始程式:

第 173 178 行 修改
<p class="fs85 top5 g555">
<div class="fs95 top10 htmleditor">

建議修改:

第 N 行 新增 style=“line-height: 20px;”
<p class="fs85 top5 g555" style="
    line-height: 20px;
">
<div class="fs95 top10 htmleditor" style="
    line-height: 20px;
">

補充

image

結尾(選填,可增加網站建議) (edited)