觀光職能e學院-謝茵安

網站

觀光職能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

問題:

可能原因:

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

原始程式:

位置: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

問題:

可能原因:

標題寬度設置過窄。

原始程式:

位置: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

問題:

可能原因:

內文寬度設置過窄。

原始程式:

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