觀光職能e學院-謝茵安

ray 交通部
, ,
#1

網站

觀光職能e學院

姓名

謝茵安

檢測日期

2018-05-09

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本：Chrome 65.0.3325.181

解析度（手機螢幕）

螢幕解析度 360X640

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

是

壞掉的連結

1.顯示找不到網頁資源
首頁>最新消息>東南亞擴大行銷
image

跑版（影響閱讀）問題

1.表格跑掉 解法回文連結
首頁>最新消息>交通部觀光局與FOX體育台攜手推出「單車環島遊台灣網站」
image

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

無

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

無

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

無

閱讀模式

Android系統

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

無

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

1.明明還有空格，但是卻直接顯示…，這樣很難看清楚標題。建議可以把後面的字也放多一點上來。 解法回文連結
首頁>最新消息
image
2.內文有點太過偏左，明明右邊還有空間，文字卻都集中在左邊。 解法回文連結
首頁>觀光遊樂業場域經濟大開發
image

#2

問題：

可能原因：

連續數字及英文字串無法自動換行，導致跑版。

原始程式：

位置：view-source:https://www.taiwan.net.tw/m1.aspx?sNo=0024823
883行

<tr>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt">2016年獲得奧運金牌的Team Sky自行車隊成員Owain Doull</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt">來自菲律賓的2015年環球小姐Pia Alonso Wurtzbach</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt">德國印度混血寶萊塢女星和慈善家Evelyn Sharma</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt">英格蘭七人橄欖球隊前隊長及健力士世界紀錄「最北部橄欖球比賽」保持人Ollie Phillips</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt">亞洲聯合旅遊節目主持人及FOX體育台主持人Edward Russell</td>
        </tr>

建議修改：

讓內文可以自動換行，在td標籤內加入word-break:break-all;。

<tr>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt;word-break:break-all;">2016年獲得奧運金牌的Team Sky自行車隊成員Owain Doull</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt;word-break:break-all;">來自菲律賓的2015年環球小姐Pia Alonso Wurtzbach</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt;word-break:break-all;">德國印度混血寶萊塢女星和慈善家Evelyn Sharma</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt;word-break:break-all;">英格蘭七人橄欖球隊前隊長及健力士世界紀錄「最北部橄欖球比賽」保持人Ollie Phillips</td>
            <td valign="top" width="20%" style="border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:50pt;word-break:break-all;">亞洲聯合旅遊節目主持人及FOX體育台主持人Edward Russell</td>
        </tr>

補充：

過度換行，導致表格過窄，反而會影響閱讀。
(修正後之截圖)
51

#3

問題：

可能原因：

標題寬度設置過窄。

原始程式：

位置：https://elearning.taiwan.net.tw/css/NewVersion/style-1.css:1225

@media (max-width: 480px)
.news_list p {
    width: 65%;
    white-space: nowrap;
    padding: 0 0 0 20px;
    font-size: 19px;
}

建議修改：

將寬度改為100%。

@media (max-width: 480px)
.news_list p {
    width: 100%;
    white-space: nowrap;
    padding: 0 0 0 20px;
    font-size: 19px;
}

補充：

(修正後之截圖)
52

#4

問題：

可能原因：

內文寬度設置過窄。

原始程式：

1.位置：https://elearning.taiwan.net.tw/css/NewVersion/style-1.css:849

@media (max-width: 480px)
.course_main_summary {
    display: inline-block;
    width: 77%;
}

建議修改：

將寬度改為90%。

@media (max-width: 480px)
.course_main_summary {
    display: inline-block;
    width: 90%;
}

補充：

(修正後之截圖)
53