交通部觀光局西拉雅國家風景區管理處觀光資訊網－談宇綺

ray 交通部
#1

網站

交通部觀光局西拉雅國家風景區管理處觀光資訊網

姓名

談宇綺

日期

2017-11-26

瀏覽器解析度（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.[意見信箱Q&A]在展開問題時，頁面會先移動至頂端，再回到展開的答案處，會造成使用上操作不便。
2. 網頁設計很好看，規劃也很完整，值得其他單位參考。

#2

#問題

#可能原因
在ipad瀏覽模式下的js設定不正確

#問題程式

在 /MainWeb/assets/js/function.js 中

    /**************scrolltofixed**************/
    // $('.menu-container').scrollToFixed({zIndex: 999});
    if ($( window ).width() >= 1025) {
        $('nav.mainNavWrap').scrollToFixed();
    }

判斷裝置width >= 1025 時 才將導覽列固定在上方
但ipad的width是1024
因此應該要改成 >= 1024
才是正確的

#建議修改

    /**************scrolltofixed**************/
    // $('.menu-container').scrollToFixed({zIndex: 999});
    if ($( window ).width() >= 1024) {
        $('nav.mainNavWrap').scrollToFixed();
    }

效果如下

#3

#問題

#可能原因
直接在class為tabBox(怎麼去、吃什麼、住哪裡 的內文區塊)的div行內設定了position: absolute; left: 0px;
而不是在css media裡 去因應解析度的不同而設定
在ipad檢視狀況下 width是1024px
這種情況position還是absolute的話 就會造成問題狀況

#問題程式

<div class="tabBox" style="position: absolute; left: 0px;">
         (省略)                   
 </div>

(內文有三個tabBox)

#建議修改
將行內的 position: absolute; left: 0px; 移除
並放到初始的css
在max-width:1024 px時再設定position: relative;

.locationInfo .ecNetUlTabs>li .tabBox {
    width: 100%;
    position: absolute;
    left: 0;
}
@media screen and (max-width: 1024px)
.locationInfo .ecNetUlTabs>li .tabBox {
    width: 100%;
    position: relative;
}

如此在max-width:1024 px或以上的狀況都能正常顯示

效果如下

#4

#問題

#建議修改
建議修正連結 台南市政府觀光旅遊局

#問題

#建議修改
建議修正連結 東山服務區

#問題

#建議修改
建議修正連結

#5

#問題

#可能原因
點選變換文字大小的js function ResetFontSize()
是更改內文部分的div #RangeContent
但在#RangeContent裡還有一個div .textWrap，當中設定了font-size: 1.75rem;

因為在因為 CSS specificity 的規則裡， Type (h1) > Class (.example) > ID (#example)
所以 .textWrap 蓋過 #RangeContent
即使ResetFontSize()更改了#RangeContent的font-size
還是會被.textWrap 的font-size: 1.75rem;蓋過

#問題程式
page.css

.textWrap {
    line-height: 200%;
    font-size: 1.75rem;
}

#建議修改

拿掉 .textWrap 中的font-size

.textWrap {
    line-height: 200%;
    /*font-size: 1.75rem;*/
}