公益學習活動-盧苡萱

網站

公益學習活動

姓名

盧苡萱

檢測日期

2018-05-09

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度(手機螢幕)

375x667

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

壞掉的連結


跑版(影響閱讀)問題

[color=red]網頁跑版[/color]


[color=red]文字跑版[/color]

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

出現亂碼

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

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

閱讀模式

不可以用

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

[color=red]內容不完整[/color]

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

[color=red]網站設計可愛溫馨,色調舒服[/color]

問題:

建議修改:

RWD的CSS對於表格沒做處理,也建議別使用table,可以改用別的方式實作RWD,在這邊我用最不好的方式以解決目前跑板問題,希望能改變寫法
overflow: scroll

問題:

建議解法:

bootstrap有一個class .row-eq-height套在row上應該就可以解決了

問題:

可能原因:

RWD 設定錯誤

原始程式:

位置: page.css:72

.blue7 {
    color: #04a3a7;
    border-top: 5px solid #04a3a7;
    padding: 5px 10px;
    display: inline;
}

建議修改:

他本來只有加在字的上面,但因為螢幕大小關係造成換行,所以跟字重複到了,可以寫一個media的css把display: inline;拿掉,就會有不一樣的效果,不然就是加margin-top讓線不跟字重疊

補充

04

問題:

補充:

這應該沒有跑版,他只是因為螢幕大小強迫換行,加上他置中

問題:

可能原因:

CSS 設定錯誤

建議修改:

h3 {
      font-size: 24px;
    margin: 20px 20px;
}

補充

08

問題:

可能原因:

RWD 設定錯誤

原始程式:

位置: page.css:52

.font4 {
    font-size: 16px;
    line-height: 21px;
    text-indent: 30px;
    text-align: justify;
    color: #222;
    margin: 5px 0px;
    text-shadow: none !important;
}

建議修改:

在手機版的時候拿掉

 {
    text-indent: 30px;
}

補充

52

問題:

可能原因:

排版問題

原始程式:

<footer>
        <p>
		<a href="#p1" class="pull-right animate fadeIn animated" data-animate="fadeIn" data-duration="1.0s" data-delay="0.5s" style="animation-duration: 1s; animation-delay: 0.5s; visibility: visible;"><img src="images/gotop.png"></a>© 2017 國立臺灣科學教育館&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;指導單位:教育部<br>
		<span class="footer1">地址: 111台北市士林區士商路189號&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;電話: (02) 6610 1234 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a href="declare.html"><font color="white">隱私權政策與網站宣告</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="security.html"><font color="white">資訊安全管理作業規範</font></a>
		</p>
      </footer>

建議修改:

不要以&nbsp;進行排版,可以改用別種方式,不然無法RWD

Array.from(document.getElementsByClassName(‘col-xs-4’)).forEach(e=>{
e.classList.remove(“col-xs-4”)
e.classList.add(“col-lg-4”)
e.classList.add(“col-md-6”)
e.classList.add(“col-xs-12”)
})

1個讚