能源局 - 楊喻文

ray 經濟部
, ,
#1

網站

經濟部能源局

姓名

楊喻文

檢測日期

2018-04-20

檢測裝置

OPPO A57

作業系統 與 瀏覽器版本

Android 6.0.1
Chrome版本：Chrome 65.0.3325.109

解析度（手機螢幕）

320x640 pixels

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

是

壞掉的連結

  • 首頁->活動看板
    每一個點開來都白白的~建議如果沒有活動的話，也要有一個告訴民眾沒有活動的頁面存在
    79418
  • 首頁->活動專區
    經濟部能源局 – 再生能源發展條例
    經濟部能源局 – 能源領域性別主流化專區
    以上兩個點開來的連結是白的(domain一樣是在能源局)
    79419

跑版（影響閱讀）問題

  1. 手機版：輪播圖的點點跑到樓上了，選單點開還在(圖二)，而且下面的區塊網上移動了(能源局 - 楊喻文 - #2 lemotw1024)
    Screenshot_2018-04-20-20-55-48-51[1]
    79406
  2. 電腦版：輪播圖沒有點點，點點跑到奇怪的地方了(圖二)，且下面區塊上移
    image
    image
  • 首頁->新聞與公告->焦點新聞
    頁數那邊，若果頁數過多就會變兩層樓，不知道是不是原本就故意設定成這樣
    新聞與公告中的焦點新聞、真相說明等都是這樣
    79411

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

無

出現亂碼

無

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

無

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

無

閱讀模式

我使用安卓

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

  • 首頁->外網連結
    「行政院重大政策」點進去會直接到行政院首頁，而不是重大政策>"<
  • 網站導覽
    網站導覽(左圖)中的第六點與實際點進去(右圖)的第六點中的項目有落差
    例如Web2.0互動服務與緊急應變中心僅有右圖有
    79426 79425

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

  • 首頁
    核心業務中的icon有點小，我建議要用這麼小的圖片裡面就不要放文字，不然就用大一點的icon
    Screenshot_2018-04-20-21-10-12-74[1]
#2

問題

可能原因

輪播點點定位到錯誤的地方

原始程式

位置:
inline:17

#bx-pager {
	position: absolute;
	bottom: 325px;
	width: 100%;
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

建議修改

增加下面css，將position改成relative

@media only screen and (max-width:600px){
#bx-pager {
	position: relative !important;
	width: 100%;
        top:0px;
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
       margin-bottom: 10px;
}
}

46

#3

問題

可能原因

焦點新聞我這邊u11測試是ok的耶
下面的頁數應該是設計就這樣

#6

問題

可能原因

使用display:table 未rwd

建議修改

將inline style有display:table 相關的，都改為class接管
並在螢幕寬度過小時做block替換
(html - Is it possible to make display:table-cell layout responsive? - Stack Overflow)

.table {
    display: table;
    width: 100%;
}

.table-row {
    display: table-row;
    width: 100%;
}

.table-cell {
    display: table-cell;
}

@media screen and (max-width: 479px) {
    .table, .table-row {
        display: block;
    }
    .table-cell {
        display:inline-block;
    }
}

34

#7

問題

可能原因

li未包覆到a

原始程式

位置:
https://www.moeaboe.gov.tw/ECW/populace/content/ContentLink.aspx?menu_id=426:610

<td class="odd_row">
    <ul class="link_1" style="float: left;">
        <li>
            <a id="b664" style="display: none;">b664</a>
            一般能源名詞(General Terms)

        </li>
    </ul>           
    <a title="開啟一般能源名詞(General Terms).pdf檔" href="wHandMenuFile.ashx?file_id=1056" style="margin-left:5px;"><img title="開啟一般能源名詞(General Terms).pdf檔" src="../images/file_icon/pdf.png" alt="開啟一般能源名詞(General Terms).pdf檔" style="border-width:0px;vertical-align:2%;"></a>
</td>

建議修改

將a包入li

<td class="odd_row">
    <ul class="link_1" style="float: left;">
        <li>
            <a id="b664" style="display: none;">b664</a>
            一般能源名詞(General Terms)
            <a title="開啟一般能源名詞(General Terms).pdf檔" href="wHandMenuFile.ashx?file_id=1056" style="margin-left:5px;"><img title="開啟一般能源名詞(General Terms).pdf檔" src="../images/file_icon/pdf.png" alt="開啟一般能源名詞(General Terms).pdf檔" style="border-width:0px;vertical-align:2%;"></a>
        </li>
    </ul>           
</td>

03

#8

問題

建議修改

在螢幕小於一定大小時將width設為100%，就會將字擠下去了

02