經濟部中小企業處-劉佳慧

網站

經濟部中小企業處

姓名

劉佳慧

檢測日期

2018-04-26

檢測裝置

ASUS_Z01KDA

作業系統 與 瀏覽器版本

Android 8.0.0
Chrome版本:Chrome 65.0.3325.109

解析度(手機螢幕)

螢幕解析度 360x640 pixels

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

壞掉的連結


跑版(影響閱讀)問題

圖片跑版

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

  • 首頁> 下載專區
    (1)下載專區只有4個子項(圖一),按鈕卻有5個,多了「系統程式」按鈕(圖二)
    (2)下載專區裡的「申請書表」按鈕無法連到檔案(圖二)
    (3)從別的子項進去的按鈕無法連到其餘子項的內容,例如進去「專案計畫作業」點選「作業手冊」無資料(圖三),但其實作業手冊區是有資料的(圖四)
    圖一image 圖二image
    圖三image 圖四image

出現亂碼

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

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

閱讀模式

使用Android無閱讀模式

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

  • 首頁 >消息看板 >活動訊息 : 活動內容把表格拉的很寬,上方空白處多,且要往右滑很多,不便閱讀,不知道能不能分行。解法回文連結
    範例 : 電腦版都分了7行,行動版才3行ˊ ˋ (測試後發現螢幕解析度寬度在768以上後會自動分行)
    image image

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

  • 有些地方的網址沒有超連結,不能直接點需自己複製,較麻煩一點點,之後放文章可以注意
  • 首頁> 為民服務> 熱門議題與因應措施 : 沒有顯示日期,較難得知是哪時候的熱門議題,且部分連結是檔案,檔案內文無時間資訊,最新的文章似乎是2013年,希望此區可以更新,是對企業、民眾有幫助的資訊~
    image

問題:

可能原因:

圖片高度為固定數值,導致圖片顯示變形。

原始程式:

位置:https://www.moeasmea.gov.tw/xslGip/2017wwwch/sass/_Content.scss:788

.Content_page .FotoxText .LeftFoto img {
    display: block;
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background: #eee;
}

建議修改:

將高度設置註解掉。

.Content_page .FotoxText .LeftFoto img {
    display: block;
    width: 100%;
    /* height: 280px; */
    margin: 0 auto;
    background: #eee;
}

補充:

(修正後之截圖)
21

問題:

可能原因:

圖片跑板問題已修正,可以隨螢幕寬度正常顯示。
22

問題:

可能原因:

表格內容無法自動換行。

原始程式:

  1. 位置:https://www.moeasmea.gov.tw/xslGip/2017wwwch/assets/module/bootstrap-3.3.2/css/less/tables.less:234
@media screen and (max-width: 767px)
.table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
}
  1. 位置:https://www.moeasmea.gov.tw/xslGip/2017wwwch/assets/module/bootstrap-3.3.2/css/less/tables.less:33
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
  1. 位置:https://www.moeasmea.gov.tw/xslGip/2017wwwch/sass/_Framework.scss:207
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th {
    border: #a7a7a7 1px solid;
    vertical-align: middle;
}

建議修改:

  1. white-space: nowrap;註解掉,位置:https://www.moeasmea.gov.tw/xslGip/2017wwwch/assets/module/bootstrap-3.3.2/css/less/tables.less:234
@media screen and (max-width: 767px)
.table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {
    /* white-space: nowrap; */
}
  1. 加入word-break: break-all;,位置:https://www.moeasmea.gov.tw/xslGip/2017wwwch/assets/module/bootstrap-3.3.2/css/less/tables.less:33
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    word-break: break-all;
}
  1. <th></th>寬度設置為25%,位置:https://www.moeasmea.gov.tw/xslGip/2017wwwch/sass/_Framework.scss:207
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th {
    border: #a7a7a7 1px solid;
    vertical-align: middle;
    width: 25%;
}

補充:

(修正後之截圖)
23