經濟部觀光工廠自在遊-林文琦

ray 經濟部
, ,
#1

網站

經濟部觀光工廠自在遊

姓名

林文琦

檢測日期

2018-04-30

檢測裝置

Asus Zenfone4 Max

作業系統 與 瀏覽器版本

Android 7.1.1
Chrome版本：Chrome 65.0.3325.109

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

無

跑版（影響閱讀）問題

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

無

出現亂碼

無

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

無

網站載入緩慢（相對一般網站）

無

閱讀模式

使用Android系統

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

無

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

網站沒跑版和連結失效的問題

#2

問題：

可能原因：

表格寬度無法隨螢幕縮放條紙比例，導致跑版。

原始程式：

位置：view-source:http://www.taiwanplace21.org.tw/SightseeingActive.php
243行

<table class="table table-striped word-style-2 table-bordered">
<tbody>
<tr>
<th></th>
<th style="min-width:200px;">觀光工廠</th>
<th style="min-width:150px;">洽詢專線</th>
<th style="min-width:150px;">優惠活動內容</th>
<th style="min-width:150px;">優惠日期</th>
</tr>
.
.
.
</table>

建議修改：

如不想破壞表格結構，可在表格增設水平滾輪，供使用者左右滑動檢視。
作法：在table外增設<div style="overflow:auto;"></div>。

<div style="overflow:auto;">
  <table class="table table-striped word-style-2 table-bordered">
  <tbody>
  <tr>
  <th></th>
  <th style="min-width:200px;">觀光工廠</th>
  <th style="min-width:150px;">洽詢專線</th>
  <th style="min-width:150px;">優惠活動內容</th>
  <th style="min-width:150px;">優惠日期</th>
  </tr>
  .
  .
  .
  </table>
</div>

補充：

(修正後之截圖)
32

#3

問題：

可能原因：

表格內th標籤寬度為固定數值，導致跑版。

原始程式：

位置：view-source:http://www.taiwanplace21.org.tw/NewsList.php
231行

<tr style="background-color: #E1F5FE;">
  <th style="min-width:200px;">新聞主題</th>
  <th style="min-width:120px;">發佈日期</th>
  <th style="min-width:120px;">來源</th>
</tr>

建議修改：

將th標籤的寬度改為百分比。

<tr style="background-color: #E1F5FE;">
  <th style="width: 40%;">新聞主題</th>
  <th style="width: 30%;">發佈日期</th>
  <th style="width: 30%;">來源</th>
</tr>

補充：

(修正後之截圖)
33