低碳永續家園資訊網－謝茵安

ray 環境保護署
, ,
#1

網站

低碳永續家園資訊網

姓名

謝茵安

檢測日期

2018-05-03

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本：Chrome 65.0.3325.181

解析度（手機螢幕）

螢幕解析度 360X640

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

是

壞掉的連結

首頁>低碳示範社區專區>樂文創產品>有機柚樹認養>了解更多
首頁>低碳示範社區專區>樂文創產品>社頂部落生態旅遊>了解更多
image

跑版（影響閱讀）問題

1.內文跑版(該問題嚴重，幾乎每個主選單內的連結介面、新聞區介面都有此問題)
首頁>生態綠化>推動苗木培育>推動苗木培育(1)
首頁>推動綠屋頂>推動綠屋頂(1)
首頁>輪播圖>新聞>【能源小旅行】太陽能百態！盡在永康科技園區
首頁>低碳示範社區專區>邁向有機農業 營造健康村
image
2.程式跑版解法回文連結
首頁>評等專區>評等查詢>評等進階查詢
首頁>評等專區>評等查詢>運作機能執行排行
首頁>評等專區>評等查詢>行動項目執行排行
首頁>評等專區>評等查詢>行動項目平均審查分數
首頁>評等專區>評等查詢>認證平等完成平均得分
首頁>評等專區>評等查詢>認證平等到期日
首頁>報名專區
image
3.標題文字跑掉（多個頁面都有此問題）解法回文連結
首頁>低碳示範社區專區>鮮農特產品
首頁>低碳示範社區專區>鮮農特產品>閱讀更多>「社區」，低碳永續營造的發源地
image
4.按鈕跑掉（多個頁面都有此問題）
首頁>低碳示範社區專區>鮮農特產品
image
5.按鈕跑版嚴重(該網頁幾乎每個介面都有此問題)解法回文連結
首頁>生態綠化>推動苗木培育
image
6.選單跑掉（多個頁面都有此問題）解法回文連結
首頁>綠色運輸>推廣使用電動機車>成功案例
image

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

無

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

無

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

無

閱讀模式

Android系統

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

1.字體有大有小，小標題有的字太小，這個表格字又突然變超大解法回文連結
首頁>推動安全島綠美化>推動安全島露台窗台花卉綠美化
image
2.頂端的文字滑下來時不會消失，和下面的資訊重疊，根本無法閱讀。解法回文連結
首頁>歷史專區
image

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

1.字體都沒有分段，很難閱讀。（多個頁面都有此問題）
首頁>推動綠農園>推動社區農園(1)
image
2.該網站跑版問題很嚴重，幾乎每個頁面的按鈕、內文都有此問題。

#2

問題

可能原因

background size(雖然看起來還使不是很優)
by the way這是我目前為止看到真正有用到bootstrap而不是只是include一下假裝很fashion
真的很不容易

原始程式:

位置: 會員登入 |【低碳永續家園】資訊網

.res1 {
    background: url(/_x/_bootstrap/images/Res/icon1.gif);
}

建議修改

加background-size
順帶一提，雖然目前是說不要一直用id因為可重複性太低沒效率，不過這種單張背景圖表明只會用一次的還是請用id吧，我還想說背景到底放哪原來是放在class裡面

.res1 {
    background: url(/_x/_bootstrap/images/Res/icon1.gif);
    background-size: 100% 100%;
}

補充

image

#3

問題

可能原因

用margin硬要把img跟p合在一起做成background-img的效果
而且更詭異的是，背景的圖片是由三張小圖片用怪異的div方法組成的

建議修改

把背景圖處理好合成一張之後，再用background-img方式放在文字後面好嗎？

#4

問題

可能原因

CSS寬度設定

建議修改

位置：會員登入 |【低碳永續家園】資訊網 : 259

<select name="ctl00$ContentPlaceHolder1$DDL_ActItem" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$DDL_ActItem\',\'\')', 0)" id="ctl00_ContentPlaceHolder1_DDL_ActItem" class="sel1" style="
    width:  100%;
">

補充

圖片

#5

問題

建議修改

table並不是萬能的阿…一般的圖文新聞用用table就算了，連表單輸入也要用table
表單輸入用table就算了，還在table裡面每個element塞margin…

table本身對手機閱讀本身就很不友好了，雖然bootstrap有responsive-table可以稍微拯救一下
不過這個連裡面都塞css margin的來說，用responsive-table效果也不會到太好
還是建議用flex或grid排版，flex各家瀏覽器都已經支持了

#6

問題

可能原因

網站作者可能累了，html格式特異，雖然明顯有一部分不是用手寫是用工具生出來的
圖片
這麼整齊的無意義style tag真是壯觀

建議修改

把標題的p tag改成跟其他像一樣的h2 tag

補充

圖片
By the way, 我不確定這個網站作者的本意，畢竟原始程式的tag給得很怪

<h2 style="" align="center"><span style="">綠化建議種類</span><span style=""></span></h2>

它多了align: center這個，所以我猜它應該是誤以為這行是內文

#7

問題

可能原因

我能感覺到這個網站作者可能想要做大事，不過很可惜，失敗了
照code看出原因的是一種導覽列，不過css那邊的設定很怪

原始程式

位置：https://lcss.epa.gov.tw/App_Themes/LcssBootstrap3/Content/2_reset.css

.affix {
    position: fixed;
    top: 60px;
    width: 263px;
}

建議修改

這個class會在滾軸滑到一定高度時跑出來，可能原因最簡單的方式就是把它消失掉

.affix {
    position: fixed;
    top: 60px;
    width: 263px;
    display: none;
}