水土保持與農村再生教育網-盧苡萱

網站

水土保持與農村再生教育網

姓名

盧苡萱

檢測日期

2018-05-22

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度(手機螢幕)

375x667

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

壞掉的連結


跑版(影響閱讀)問題

文字跑版 解法回文


網頁跑版

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

出現亂碼

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

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

閱讀模式

不可以用

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

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

問題:

補充:

螢幕大小問題

問題:

資訊生回報樣板

問題:

(範例)

可能原因:

RWD 設定錯誤

建議修改:

<div class="caption" style="max-height: 84px; overflow-y: hidden;"></div>

補充

問題:

可能原因:

RWD 設定錯誤

原始程式:

<iframe title="Youtube Player" src="https://www.youtube.com/embed/aK3XB1DroUc" style="border:0;width:560px;height:315px;" allowfullscreen=""></iframe>

建議修改:

<iframe title="Youtube Player" src="https://www.youtube.com/embed/aK3XB1DroUc" style="border:0;width:100%;height:auto;" allowfullscreen=""></iframe>

補充

問題:

可能原因:

Bootstrap 設定錯誤

原始程式:

<div class="col-md-3 col-sm-4 col-xs-6">
  <div style="width:190px;height:190px;text-align:center;margin: 0 0 25px 0;">
    <a href="teacherIngenious.asp?detail=true&amp;in_type=&amp;in_class=&amp;in_no=IN2014112010115201">
      <div class="Circle_Disaster"></div>
      <div style="position:absolute;left:28px;top:70px;width:160px;color:white;font-size:1.25em;">地圖中的土石秘密</div>
      <div style="position:absolute;top:140px;width:190px;color:white;font-size:1.25em;">4,448</div>
    </a>
  </div>
</div>

建議修改:

<div class="col-md-3 col-sm-4 col-xs-6">
  <div style="width: 100%;text-align:center;margin: 0 0 25px 0;position: relative;height: 190px;">
  <a href="teacherIngenious.asp?detail=true&amp;in_type=&amp;in_class=&amp;in_no=IN2014112010115201" style="
">
    <div class="Circle_Disaster"></div>
    <div style="position:absolute;/* left:28px; */top:70px;width: 100%;color:white;font-size:1.25em;">地圖中的土石秘密</div>
    <div style="position:absolute;top: 120px;width: 100%;color:white;font-size:1.25em;">4,448</div>
    </a>
  </div>
</div>

補充

都使用bootstrap但沒有正確運用它,東西也都是用absolute的方式去寫,建議還是重寫,我這邊只先改一個,因為也並沒有把類似的東西曲class都是針對單一element去寫style
59

問題:

補充:

好像已經被修復了,中間的padding也有出來

問題:

可能原因:

RWD 設定錯誤

原始程式:

位置: 原始碼:146開始

<div class="col-md-3 col-sm-4 col-xs-6">
  <div style="text-align:center;font-size:1.25em;height:300px;width:214px;margin:0 0 20px 0;">
    <a href="activephotos.asp?detail=true&amp;al_no=AL2017120615463501">水保防災疊疊樂試教活動
      <br> 
      <img alt="IM2017120616005701" src="getimage.asp?src_no=IM2017120616005701" class="img-thumbnail" style="width:214px;height:160px;">
    </a>
   <div class="caption" style="text-align:center;color:#bcbcbc">
     <span class="glyphicon glyphicon-camera" style="margin: 0 15px 0 0;"></span>55 photos</div>
   <hr style="height:0.5pt;">
  </div>
</div>

建議修改:

把第二層div的寬度都改成

width:100%;

補充