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

網站

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

姓名

楊珣

檢測日期

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.網站架構很清晰。

問題:

可能原因:

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

原始程式:

位置: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%;
}

補充:

(修正後之截圖)

問題:

可能原因:

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

原始程式:

位置: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;
}

補充:

(修正後之截圖)

問題:

可能原因:

列表寬度較窄,且有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;
}

補充:

(修正後之截圖)

問題:

可能原因:

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

原始程式:

位置: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;
}

補充:

(修正後之截圖)