行政院海岸巡防署-許家瑀

ray 海岸巡防署
#1

網站

行政院海岸巡防署全球資訊網

姓名

許家瑀

日期

2017-10-27

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

iPad Pro
1366 * 768

作業系統版本

iOS 11.0.2
window 10（1703）

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

Chrome：版本 61.0.3163.100 (正式版本) (64 位元)
Safari：版本 11.0.2

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

無

有跑版（影響閱讀）問題

無

有出現亂碼

無

有壞掉的連結

無

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

首頁>海巡統計>互動式統計圖表：全為swf檔，swf檔可打開嗎 ><?

1.google
2.safari

首頁>人才招募>駐地風采：google的圖片沒有顯示

1.google
2.safari

首頁>海巡簡介>本署簡介>所屬機關簡介>海洋巡防總局>緣起>序言：總局照片未顯示

  1. google
  2. safari

1.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][緣起][沿革]
2.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][海洋事務[]東沙分隊簡介][東沙分隊簡介]
3.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][海洋事務[]東沙分隊簡介][地理環境]
4.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][海洋事務[]東沙分隊簡介][歷史背景]
5.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][海洋事務[]東沙分隊簡介][交通資訊]
6.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][海洋事務[]南沙分隊簡介][南沙分隊簡介]
7.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][海洋事務[]南沙分隊簡介][地理環境]
8.[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][海洋事務[]南沙分隊簡介][交通資訊]
9.[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][局長專欄][局長許靜芝先生]
10.[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][本局簡介][執法範圍]
11.[首頁][海巡簡介][本署簡介][所屬機關簡介][中部地區巡防局][本局簡介][組織架構]
12.[首頁][海巡簡介][本署簡介][所屬機關簡介][中部地區巡防局][本局簡介][執法範圍]
13.[首頁][海巡簡介][本署簡介][所屬機關簡介][中部地區巡防局][本局簡介][交通資訊]
亦有以上照片未顯示之問題

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

選單不能選：↓↓↓
[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][救生救難]
[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][維護漁權]
[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][海域治安]

按鈕不能按：↓↓↓
友善列印、轉寄友人、回上頁 那排的按鈕似乎在safari都不能按

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

新開的網頁在gogle顯示下似乎無法滿版?(以下為例示非列舉)
首頁>人才招募
首頁>海洋保育

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

常常會有不明原因顯示網頁錯誤(感覺是一段時間)，要重新整理很多次才會恢復正常狀態，希望能找到原因解決，不然好擾民!!!

1.首頁>海洋保育>學術論述>本署海巡雙月刊相關保育文章 建議可將年份由進到遠排列
2.舉辦了好多海洋相關的教育活動或是課程講座，也提供很多管道多元學習，覺得很棒!!!
3.關於外島的簡介說明的很清楚，不過建議「海洋事務」下方除了介紹比較具爭議的島嶼外，綠島、蘭嶼、小琉球、龜山島、澎湖等台灣美麗離島都也能有詳細介紹。
4.針對兩性有做統計調查，很符合現今對於兩性議題的探討及研究。
5. 南部地區巡防局有一「轄區特色」專區，有別於其他轄區特別簡介自己轄區特色，很棒!!!
6.東部地區巡防局因應區域環境而特別提供救生衣租借服務，十分周到的服務！

#2

問題描述

[首頁][海巡統計][互動式統計圖表]：全為swf檔，swf檔可打開嗎 ><?

swf 即 Flash 檔案

可能原因

經測試 Chrome 版本 61.0.3163.100 (正式版本) (64 位元) 在啟用 Flash 後可正常檢視。

電腦版 Safari 部分預設並不啟用也不包含 Flash 外掛

Mobile 裝置之 Safari 無法播放 Flash

#3

問題描述

[首頁][人才招募]駐地風采：google的圖片沒有顯示

可能原因

目前檢測可正常顯示，可能是受附加元件影響（例如擋廣告元件）。

圖片使用的路徑符合常見廣告 pattern

常見擋廣告 pattern

受影響的原始碼

<div class="photo">
       
           <a rel="lightbox" href="ad/uploadfile2/1-2.jpg"> <img class="photo_1" title="海巡建築之美1" alt="海巡建築之美1" src="ad/uploadfile2/1-2.jpg" width="158" height="136" hidden="" style="display: none !important;"></a>
             <p>
            <span id="DataList1_AlbumNameLabel_0">海巡建築之美1</span>
            </p>
            <p></p>
            </div>

解決辦法

更改 path，目前所使用的圖片 path 符合常見廣告阻擋規則且本身也不具意義（ad/uploadfile2 本身跟相簿、照片集無關）

#4

問題描述

[首頁][海巡簡介][本署簡介][所屬機關簡介][海洋巡防總局][緣起]序言1：總局照片未顯示

可能原因

圖片資源已死 (回傳 404)

#5

問題描述

選單不能選：↓↓↓
[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][救生救難]
[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][維護漁權]
[首頁][海巡簡介][本署簡介][所屬機關簡介][北部地區巡防局][海域治安]

測試結果

Chrome 、 iPhone 、 iPad 測試正常

不能點選是因為本來設計就不能按…

#6

咦咦咦!!! 我在chrome還是不能點進去耶 ><
你是在「北區」的嗎~~~~~~>< 在北區首頁那邊
↓↓↓
https://www.cga.gov.tw/GipOpen/wSite/mp?mp=9992

#7

拍謝…我沒看到圖理解錯區域了…Orz

#8

哈哈哈抱歉~~~~~~~~以後會記得附圖 ><

#9

看了一下，不能點的部分是本來就沒設計能按（原始碼當中沒有給予 Link 位置）…

#10

問題描述

新開的網頁在gogle顯示下似乎無法滿版?(以下為例示非列舉)

同時發現右方側邊欄有歪曲問題

解決方式

側邊欄歪曲問題

移除 #rank #welfare #life .leftbar_ul 四個 CSS 設定當中的 height 屬性，讓元素高度根據內容來決定。

網頁未填滿footer 未置底問題

  1. 將 #Container 的最小高度設定為 100vh (min-height: 100vh;)
  2. 用 flex 進行排版，透過 flex-grow 將 footer 所佔空間撐開，填補剩餘的頁面空間，再將內容置底對齊

PS 我覺得這一個不是太大的問題…其實舊有網頁本來就不會針對不同裝置填滿進行設計…XD

#11

好 !!! XD

#12

因為其他分區或是主頁都是可以點的，在想他是不是該給(:thinking:?)

#13

那應該就是他程式碼撰寫瑕疵了QQ