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

網站

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

姓名

許家瑀

日期

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.東部地區巡防局因應區域環境而特別提供救生衣租借服務,十分周到的服務!

問題描述

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

swf 即 Flash 檔案

可能原因

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

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

Mobile 裝置之 Safari 無法播放 Flash

問題描述

[首頁][人才招募]駐地風采: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 本身跟相簿、照片集無關)

問題描述

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

可能原因

圖片資源已死 (回傳 404)

問題描述

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

測試結果

Chrome 、 iPhone 、 iPad 測試正常

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

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

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

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

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

問題描述

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

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

解決方式

側邊欄歪曲問題

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

網頁未填滿footer 未置底問題

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

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

好 !!! XD

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

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