中央氣象局全球資訊網-許家瑀

ray 交通部
#1

網站

中央氣象局全球資訊網

姓名

許家瑀

日期

2017-11-18

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

iPad Pro
1366 * 768

作業系統版本

iOS 11.1 (15B93)
window 10（1703）

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

Chrome：版本 62.0.3202.94 (正式版本) (64 位元)
Safari：版本 11.1

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

大量超框
首頁>預報>漁業氣象>滿潮預報圖
首頁>觀測>即時海況
首頁>預報>數值模式>海象預報模式圖

範例1

有跑版（影響閱讀）問題

首頁：中央氣象局 mark 遮住某部分的按鈕了

大量表格重疊：
首頁>預報>漁業氣象>遠海漁業
首頁>預報>漁業氣象>台灣近海
首頁>氣候>瞭解氣候>聖嬰現象(ENSO)主題報導
首頁>氣候>臺灣氣候>臺灣氣候特徵簡介

範例1
範例2

首頁>預報>漁業氣象>潮汐預報：跑版

最底圖片被吃掉了
首頁>氣候>氣候統計>波浪統計
首頁>氣候>氣候統計>海溫統計

有出現亂碼

無

有壞掉的連結

無

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

大量safari 無法拉動：
例
首頁>預報>長期預報>月長期天氣展望
首頁>預報>長期預報>季長期天氣展望
首頁>預報>長期預報>聖嬰展望
首頁>防災氣象>防災專區>防災研討會>實施計畫
首頁>防災氣象>防災專區>天然災害災防問答
首頁>防災氣象>防災專區>防災業務通訊錄
首頁>氣候>氣候監測

首頁>影音氣象>專題動畫：「典型衛星雲圖」、「認識潮汐」、「地面氣象觀測」項目 safari 無 flash

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

無

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

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

網站資訊量大，故重複性問題太多太大，建議重新審視整個網站相容性及版面配置的問題。

之前查預報都沒有注意到項目下還細分了原鄉／客庄／國家公園等特殊區域預報，很用心也很便民。

常識下方的「氣象百科」及「天文星象」內容豐富充足，對各個問題的回答解釋也詳細清楚，教育效果大，很棒！

中央氣象局全球資訊網(英文)-游子萱
#2

問題描述

可能原因＆修改方式

未針對 RWD 進行處理。

1.滿朝預報圖

網頁對於預報圖本身寬度採用絕對數值

<img id="tideImg" alt="滿潮預報圖" title="連結潮汐預報" style="cursor: pointer;" onclick="link_to_cwb_tide()" src="./charts/full_0.jpg" height="720" width="960">

將寬度改為 width 設為 100%、height 不設定或改為 auto

2.即時海況

超出的區域是使用 iframe 進行嵌入，iframe 本身寬度也是固定數值

而被嵌入之頁面本身亦未針對 RWD 進行處理，若僅修改 iframe 寬度為相對數值（100%）會在該區域產生一個橫向捲軸，在操作體驗上會非常差，建議做通盤考量後重新設計該頁面。

3.首頁>預報>數值模式>海象預報模式圖

建議不要使用表格，改用其他方式來做選取

#3

＃ 問題描述

幫補一張跑版圖

可能原因

(待查)

#4

問題描述

可能原因

未針對 RWD 進行處理。

#5

問題描述

複檢結果

沒有實作 RWD ，從下面兩張圖可以看到，是兩個不同區塊，只要 Viewport 寬度比較小不足以讓他們並排顯示就換行往下排列了。


#6

問題描述

可能原因

主內文部分是採用 iframe 嵌入，而 iframe 高度不足以容納下內容便會被吃掉

#7

問題描述

可能原因

在iOS 上 PDF 嵌入網頁一定會發生的狀況，在 iOS 要避免嵌入 PDF

#8

簡評、建議

其實 mobile 版的氣象局做得不錯

http://www.cwb.gov.tw/m/

建議逐步將氣象局主站的功能、資訊擴充到 mobile 版上， 讓 mobile 版在未來直接取代主網站

mobile 版本身也有完整的 RWD 適合電腦瀏覽，只是可能因為電腦 viewport 較寬，可能需要注意排版上會不會使資訊密度太低 （例如圖片很大一張佔滿了版面）