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

ray 經濟部
, ,
#1

網站

經濟部中小企業處

姓名

劉佳慧

檢測日期

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
#2

問題：

可能原因：

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

原始程式：

位置：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

#3

問題：

可能原因：

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

#4

問題：

可能原因：

表格內容無法自動換行。

原始程式：

  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