國立臺灣歷史博物館官網－談宇綺

ray 文化部
#1

網站

國立臺灣歷史博物館官網

姓名

談宇綺

日期

2017-11-05

瀏覽器解析度（iOS的Safari填裝置名稱 macOS填瀏覽器解析度）

iPad Air2

作業系統版本

iOS 10.2

瀏覽器版本（iOS的Safari填iOS版本）

Chrome：版本 61.0.3163.73
Safari：iOS 10.2

有發現表格排版影響閱讀問題（大量table爆炸可以截示意圖列出位置就好）

無

有跑版（影響閱讀）問題

有出現亂碼

無

有壞掉的連結

無

有不能用的外掛程式（ActiveX、Applet、Flash、Silverlight、…）

無

有不能運作的網頁元素（如按鈕不能按、選單不能選等）

＊所有頁面的字級大小選擇按鈕：
點選字級大小變換，字沒有相應的改變大小。電腦及平板操作均是。

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

對此網站建議（給個建議吧）

1.除了介面設計完善，網頁的內容規劃也很不錯，導覽列的分類有有效的分眾(從使用體驗上來看)。
2. 網站內各個部份的圖片設計(包含展覽宣傳、會員募集的招募等)很好看！希望每個政府網站的宣傳文宣都能有這個等級~
3.跑版導致導覽列height變長此問題影響很大！因為會覆蓋掉網頁內容的麵包屑以及字級變換的按鈕。

1個讚
#2

問題

點選字級大小變換，字沒有相應的改變大小。電腦及平板操作均是。

目前使用chrome和safari是沒問題的，可以更換字體大小

問題

導覽列點開的選單，於平板操作時無法收起。

可能原因

使用hover方式展開導覽列
移動裝置不適用

建議修改

改以js onclick等方式展開導覽列

#3

#問題

問題無法復現
以chrome模擬ipad狀況如下：

#4

#問題

#可能原因
導覽列子項目的部分使用bootstrap grid system做排版
在「活動」的子項目下
每個活動的div class是 .col-lg-4
父層div是 .col-lg-12 col-md-12 col-sm-12 col-xs-12
.col-lg-4指在視窗width>=992px (Large)的狀況下
佔了4/12的width

但因為沒有特別設定在width>=768px(Medium，class為 .col-md-) 以及 width>=576px(Small，class 為 .col-sm-)的狀況
因此.col-lg-4會自動響應成滿版width: 100%的狀況

#問題程式

<li class="dropdown yamm-fw"> <a href="submenu_27.html" class="dropdown-toggle" tabindex="106">活動</a>
    <ul class="dropdown-menu">
        <li>
            <!-- Content container to add padding -->
            <div class="yamm-content">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="col-lg-12">
                            <h5><a href="activityreglist_50.html" tabindex="107">最新活動</a></h5>
                        </div>
                        <div>
                            <div class="col-lg-4"> 
                                <!-- Video Box Start -->
                                <div class="videobox">
                                    <figure>
                                        (省略)
                                    </figure>
                                </div>
                                <!-- Video Box End -->
                            </div>
                            <div class="col-lg-4">
                                <!-- Video Box Start -->
                                <div class="videobox">
                                    <figure>
                                        (省略)
                                    </figure>
                                </div>
                                <!-- Video Box End -->
                            </div>
                            <div class="col-lg-4">
                                <!-- Video Box Start -->
                                <div class="videobox">
                                    <figure>
                                        (省略)
                                    </figure>
                                </div>
                                <!-- Video Box End -->
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <h5>                                        <a href="activityreglist_51.html" tabindex="111">活動回顧</a>                                      </h5> </div>
                        <div>
                            <div class="col-lg-4">
                                <!-- Video Box Start -->
                                <div class="videobox">
                                    <figure>
                                       (省略)
                                    </figure>
                                </div>
                                <!-- Video Box End -->
                            </div>
                            <div class="col-lg-4">
                                <!-- Video Box Start -->
                                <div class="videobox">
                                    <figure>
                                       (省略)
                                    </figure>
                                </div>
                                <!-- Video Box End -->
                            </div>
                            <div class="col-lg-4">
                                <!-- Video Box Start -->
                                <div class="videobox">
                                    <figure>
                                       (省略)
                                    </figure>
                                </div>
                                <!-- Video Box End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</li>

#建議修改

我只針對平板的狀況 width>=768px(Medium) 做處理
因為在手機的狀況 width>=576px(Small) 圖片滿版反而是適合的

處理方式為
為每個<div class="col-lg-4">加上 class col-md-4 即可

修改後呈現如下

關於bootstrap grid system詳細可以參考官網