公益學習活動-盧苡萱

ray 教育部
, ,
#1

網站

公益學習活動

姓名

盧苡萱

檢測日期

2018-05-09

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度（手機螢幕）

375x667

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

是

壞掉的連結

無

跑版（影響閱讀）問題

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

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

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

無

出現亂碼

無

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

無

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

無

閱讀模式

不可以用

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

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

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

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

#2

問題：

建議修改：

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

#3

問題：

建議解法：

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

#4

問題：

可能原因：

RWD 設定錯誤

原始程式：

位置： page.css:72

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

建議修改：

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

補充

04

#5

問題：

補充：

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

#6

問題：

可能原因：

CSS 設定錯誤

建議修改：

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

補充

08

#7

問題：

可能原因：

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

#8

問題：

可能原因：

排版問題

原始程式：

<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

#9

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個讚