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

網站

低碳永續家園資訊網

姓名

謝茵安

檢測日期

2018-05-03

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本:Chrome 65.0.3325.181

解析度(手機螢幕)

螢幕解析度 360X640

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

壞掉的連結

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


跑版(影響閱讀)問題

1.內文跑版(該問題嚴重,幾乎每個主選單內的連結介面、新聞區介面都有此問題)
首頁>生態綠化>推動苗木培育>推動苗木培育(1)
首頁>推動綠屋頂>推動綠屋頂(1)
首頁>輪播圖>新聞>【能源小旅行】太陽能百態!盡在永康科技園區
首頁>低碳示範社區專區>邁向有機農業 營造健康村


2.程式跑版解法回文連結
首頁>評等專區>評等查詢>評等進階查詢
首頁>評等專區>評等查詢>運作機能執行排行
首頁>評等專區>評等查詢>行動項目執行排行
首頁>評等專區>評等查詢>行動項目平均審查分數
首頁>評等專區>評等查詢>認證平等完成平均得分
首頁>評等專區>評等查詢>認證平等到期日
首頁>報名專區

3.標題文字跑掉(多個頁面都有此問題)解法回文連結
首頁>低碳示範社區專區>鮮農特產品
首頁>低碳示範社區專區>鮮農特產品>閱讀更多>「社區」,低碳永續營造的發源地

4.按鈕跑掉(多個頁面都有此問題)
首頁>低碳示範社區專區>鮮農特產品

5.按鈕跑版嚴重(該網頁幾乎每個介面都有此問題)解法回文連結
首頁>生態綠化>推動苗木培育

6.選單跑掉(多個頁面都有此問題)解法回文連結
首頁>綠色運輸>推廣使用電動機車>成功案例


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

不能用的外掛程式(Flash、ActiveX、Applet、Silverlight、…)

網站載入緩慢(相對一般網站)

閱讀模式

Android系統

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

1.字體有大有小,小標題有的字太小,這個表格字又突然變超大解法回文連結
首頁>推動安全島綠美化>推動安全島露台窗台花卉綠美化


2.頂端的文字滑下來時不會消失,和下面的資訊重疊,根本無法閱讀。解法回文連結
首頁>歷史專區

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

1.字體都沒有分段,很難閱讀。(多個頁面都有此問題)
首頁>推動綠農園>推動社區農園(1)


2.該網站跑版問題很嚴重,幾乎每個頁面的按鈕、內文都有此問題。

問題

可能原因

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

原始程式:

位置: https://lcss.epa.gov.tw/LcssViewPage/Responsive/ActMain.aspx?actmain=A&id=1

.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%;
}

補充

問題

可能原因

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

建議修改

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

問題

可能原因

CSS寬度設定

建議修改

位置:https://lcss.epa.gov.tw/LcssViewPage/Responsive/GainMain.aspx?actmain=C&forName=36B6CA5EE9D800F327AF038AE1341BED618709D1D4851FD0D0AA72630252499ACDD1FE69FDA00B5D&id=42 : 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%;
">

補充

問題

建議修改

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

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

問題

可能原因

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

建議修改

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

補充


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

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

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

問題

可能原因

我能感覺到這個網站作者可能想要做大事,不過很可惜,失敗了
照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;
}