網站

公益學習活動

姓名

楊珣

檢測日期

2018-05-16

檢測裝置

Sony Xperia Ultra XA1

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本：Chrome 66.0.3359.170

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

無

跑版（影響閱讀）問題

• 問題一(表格跑版)//解法回文連結
• 首頁 > 最新消息 > 科教館 107年度「『愛』迪生出發」核定錄取名單暨期程表公布
  
  (範例一)

• 問題二(文字跑版)//解法回文連結
• 首頁 > 計畫簡介 > 故事的開始
• 首頁 > 我們的成果 > 歷年概況
  
  (範例二)

• 問題三(QR code 圖示跑版)//解法回文連結
• 首頁 > 計畫簡介 > 故事的開始
  
  (範例三)

• 問題四(文字框跑版)//解法回文連結
• 首頁 > 參與我們 > 企業怎麼說
  
  (範例四)

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

無

出現亂碼

無

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

無

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

無

閱讀模式

使用Android系統

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

• 問題一(無顯示麵包屑)
• (整個網站都沒有麵包屑的配置)

• 問題二(排版很亂))
• 首頁 > 我們的成果 > 故事回饋
  
  (範例二)

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

• 覺得很棒的地方

• 1.網站整體設計很用心，排版跟配色都很協調。
• 2.互動式的按鈕做的很用心，很適合給學齡孩子使用。

問題

可能原因

bootstrap table-responsive可以解決問題

<div class="table-responsive">
<table class="table table-hover" id="a4">
		    <tbody><tr>
			  <th class="center" width="100">公告標題</th>
			  <td>科教館 107年度「『愛』迪生出發」核定錄取名單暨期程表公布</td>
			</tr>
		    <tr>
			  <th class="center">公告

補充

問題

可能原因

這到底是什麼操作，人工排版阿
中間那些br換行到底在做什麼…到底為什麼要這樣…
如果是要自動換行有word-break: break-all阿

問題

可能原因

這三個br換行看起跟樓上的br用起來一樣駕輕就熟，用到出神入化了
用換行來排版…很直觀但是太native了
可以用grid排版嗎…
by the way qr code跑掉是因為原圖就跑掉了，我第一次看到長方形的qr code還是原圖不是被調過

問題

可能原因

其實本身就有做自適應，不過其實這樣看起來還是要調整排版狀況，寬螢幕跟長螢幕還是有差
本身網站寫的其實不錯了