經濟部溫室氣體減量資訊網--楊珣

ray 經濟部
, ,
#1

網站

經濟部溫室起體減量資訊網

姓名

楊珣

檢測日期

2018-05-15

檢測裝置

Sony Xperia Ultra XA1

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本：Chrome 66.0.3359.170

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

跑版（影響閱讀）問題

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

無

出現亂碼

無

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

無

網站載入緩慢（相對一般網站）

無

閱讀模式

使用Android系統

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

無

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

需要改進的地方

覺得棒棒的地方

  • 1.網頁整體設計很棒，顏色、排版以及圖示都有很好的協調性。
  • 2.網站架構很清晰。
#2

問題：

可能原因：

按鈕較寬，螢幕縮放後，按鈕自動換行，導致跑版。

原始程式：

位置：https://www.go-moea.tw/css/customize.css?time=20180507:1

#is_content .tab-links li {
    margin: 0px 5px;
    float: left;
    list-style: none;
}

建議修改：

將按鈕列表寬度設定為28%。

#is_content .tab-links li {
    margin: 0px 5px;
    float: left;
    list-style: none;
    width: 28%;
}

補充：

(修正後之截圖)
41

#3

問題：

可能原因：

網址為連續英文字串，無法自動換行，導致跑版。

原始程式：

位置：https://www.go-moea.tw/css/customize.css?time=20180507:1

.Block_incontent .row {
    padding-left: 15px;
    padding-right: 15px;
}

建議修改：

使連續英文字串自動斷行，在回覆div的CSS中加入word-break: break-all;。

.Block_incontent .row {
    padding-left: 15px;
    padding-right: 15px;
    word-break: break-all;
}

補充：

(修正後之截圖)
42

#4

問題：

可能原因：

列表寬度較窄，且有padding設置，導致文字過度換行，不易閱讀。

原始程式：

  1. 左邊年度欄位css，位置：https://www.go-moea.tw/assets/module/bootstrap-3.3.2/css/bootstrap.min.css:1。 
.col-xs-4 {
    width: 33.33333333%;
}
  1. 右邊PDF欄位css，位置：https://www.go-moea.tw/assets/module/bootstrap-3.3.2/css/bootstrap.min.css:1。 
.col-xs-6 {
    width: 50%;
}

建議修改：

將CSS更改如下：

  1. 左邊年度欄位css，位置：https://www.go-moea.tw/assets/module/bootstrap-3.3.2/css/bootstrap.min.css:1。 
.col-xs-4 {
    width: 30%;
    padding: 0;
}
  1. 右邊PDF欄位css，位置：https://www.go-moea.tw/assets/module/bootstrap-3.3.2/css/bootstrap.min.css:1。 
.col-xs-6 {
    width: 70%;
    padding: 0;
}

補充：

(修正後之截圖)
43

#5

問題：

可能原因：

麵包穴高度設為固定數值，導致跑版。

原始程式：

位置：https://www.go-moea.tw/css/customize.css?time=20180507:1。

.breadcrumb {
    padding: 5px 20px;
    border-bottom: 1px solid #e2e2e2;
    height: 35px;
    border-radius: 0px;
    overflow: hidden;
    background: url(../images/icon_home.png) no-repeat 0 8px;
}

建議修改：

將高度設置移除。

.breadcrumb {
    padding: 5px 20px;
    border-bottom: 1px solid #e2e2e2;
    /* height: 35px; */
    border-radius: 0px;
    overflow: hidden;
    background: url(../images/icon_home.png) no-repeat 0 8px;
}

補充：

(修正後之截圖)
44