勞動部職業安全衛生署-謝茵安

網站

職業安全衛生署

姓名

謝茵安

檢測日期

2018-04-30

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本:Chrome 65.0.3325.181

解析度(手機螢幕)

螢幕解析度 360X640

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

壞掉的連結

連結顯示404
首頁>行政院公報資訊網


跑版(影響閱讀)問題

1.圖片跑版 解法回文連結
首頁>本署介紹>發展沿革
首頁>本署介紹>職掌及組織>組織架構
首頁>職災保護>職業病鑑定>職業病鑑定流程


2.文字跑版(幾乎每個介面都有此問題) 解法回文連結
首頁>本署介紹>職掌及組織
首頁>新聞與公告>公布欄

3.表格跑版 解法回文連結
首頁>安全與衛生>勞工健康服務>從事勞工健康服務醫護人員之認可訓練
首頁>安全與衛生>勞工體格及健康檢查>辦理勞工體格及健康檢查醫護人員訓練
首頁>安全與衛生>勞工體格及健康檢查>特定檢查項目(血(尿)中鉛、尿中鎳、尿中無機砷、尿中鎘、血(尿)中汞、尿中鉻及血清銦等)檢驗之機構名單查詢
首頁>安全與衛生>危險性機械設備安全>危險性機械及設備指定適用國外檢查標準
首頁>勞動檢查>勞動檢查機構一覽表
首頁>職災保護>職災勞工個案服務>各縣市聯絡窗口資訊

4.內文跑版 解法回文連結
首頁>職災保護>職災勞工個案服務>職災勞工諮詢專線服務說明


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

出現亂碼

不能用的外掛程式(Flash、ActiveX、Applet、Silverlight、…)

網站載入緩慢(相對一般網站)

閱讀模式

Android系統

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

1.圖片放在格子裡時似乎壓縮到格子,版面看起來很奇怪。新聞稿區有圖片的部分都有此問題。
解法回文連結
首頁>新聞與公告>新聞稿>響應「428世界職業安全衛生日」,勞動部許部長與高雄市許代理市長共同宣示打造零災害的職場環境

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

1.表格太窄,文字被擠壓的很難閱讀。 解法回文連結
首頁>職災保護>職業災害預防與職災勞工職業重建補助


2.圖片可以另外點開放大,這點非常方便閱讀。
3.跑版的問題有點多,建議從這裡著手改進。

問題:

可能原因:

圖片寬度設為固定數值,導致跑版。

原始程式:

位置:view-source:https://www.osha.gov.tw/1106/1108/1109/1449/
699行

<img style="width: 500px; height: 379.43262411347513px;" src="/media/3900/article_0002.png?width=500&amp;height=379.43262411347513" alt="本署簡介" data-id="11871">

建議修改:

將圖片寬度改為百分比。

<img style="width: 100%;" src="/media/3900/article_0002.png?width=500&amp;height=379.43262411347513" alt="本署簡介" data-id="11871">

補充:

(修正後之截圖)

問題:

可能原因:

標題與內容間隔過窄,導致螢幕縮小時文字重疊。

原始程式:

位置:https://www.osha.gov.tw/css/style.css?cdv=1722324321:437

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
.listTb table td {
    border: none;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding-left: 17%;
}

建議修改:

將間隔變寬,將padding-left的百分比改為30%。

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px)
.listTb table td {
    border: none;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding-left: 30%;
}

補充:

(修正後之截圖)

問題:

可能原因:

表格寬度設為固定數值且無法左右滑動,導致內容顯示超出版面,影響閱讀。

原始程式:

位置:view-source:https://www.osha.gov.tw/1106/1119/1136/1139/2559/
701行

<table border="0" width="926" height="274">
    <tbody>
      <tr>
        <th style="text-align: center;" colspan="5">
          <p><strong>專業訓練</strong></p>
        </th>
      </tr>
  .
  .
  .
</table>

建議修改:

如不想破壞表格結構,可為table加上水平滾輪,供使用者左右滑動。
作法:在table外層加上<div style="overflow:auto;"></div>

<div style="overflow:auto;">
  <table border="0" width="926" height="274">
    <tbody>
      <tr>
        <th style="text-align: center;" colspan="5">
          <p><strong>專業訓練</strong></p>
        </th>
      </tr>
  .
  .
  .
  </table>
</div>

補充:

(修正後之截圖)

問題:

可能原因:

超連結為連續英文字串,無法自動斷行,導致文字超出螢幕。

原始程式:

位置:https://www.osha.gov.tw/css/style.css?cdv=1722324321:580

.cp a {
    color: #09C;
    text-decoration: underline;
}

建議修改:

在連結css標籤中加入word-break: break-all;,使英文字串能自動斷行。

.cp a {
    color: #09C;
    text-decoration: underline;
    word-break: break-all;
}

補充:

(修正後之截圖)

問題:

可能原因:

圖片靠外框顯示導致上方無留白且因長寬設為固定數值導致變形,影響瀏覽體驗。

原始程式:

位置:https://www.osha.gov.tw/css/style.css?cdv=1722324321:683

@media (max-width: 439px)
.attachment .images li img {
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 4px;
}

建議修改:

1.讓圖長寬依原圖自動調整,並與外框保留間隙。
作法:將寬度設定註解掉,並把margin改為10px。

@media (max-width: 439px)
.attachment .images li img {
    /* width: 180px; */
    height: auto;
    display: block;
    margin: 5px auto 4px;
}

補充:

(修正後之截圖)

問題:

可能原因:

文章內容以表格層層包覆,原始網頁雖未超出版面,但內容較多的部分會因為壓縮過度拉長,不便使用者閱讀。

建議修改:

無程式問題,
但建議可以將內文外層改為<h1></h1><p></p>等文章標籤顯示,表格部分再以<table></table>包覆。