教育脈動-楊喻文

ray 教育部
, ,
#1

網站

教育脈動

姓名

楊喻文

檢測日期

2018-05-06

檢測裝置

OPPO A57

作業系統 與 瀏覽器版本

Android 6.0.1
Chrome版本：Chrome 65.0.3325.109

解析度（手機螢幕）

320x640 pixels

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

是

壞掉的連結

  • 首頁
    banner第一張海洋教育圖片
    原連結
    改正後連結
    兩個連結只差在一個是https(上)，另一個是http(下)，但前者是不能連上去的，後者可以
    這個網站中有很多圖片中的連結都是這樣的，不知道發生甚麼事

跑版（影響閱讀）問題

  1. 網址超出(畫面可以左右滑動)，還詭異的換行了 解法回文連結
    85977
  2. 原本的圖片是正三角形和圓形的QQ
    85979 85980

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

無

出現亂碼

無

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

無

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

無

閱讀模式

我使用安卓

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

無

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

  • 首頁
    banner輪播圖中，12的下一張卻是10，11不見了 :fearful:
    86044 86045
#2

問題：

可能原因：

  1. 超連結為連續英文字串，無法自動換行，導致APA引註跑版。
    圖片寬高設為固定數值，導致變形。

原始程式：

1.圖片，位置：view-source:https://pulse.naer.edu.tw/Home/Content/bbb4f8e1-c65b-45c6-83e2-dca412648d0b?insId=a62f5a36-fcc2-45c5-a3cb-f5f31a179c56&CurrentPage=1&parentName=第13期%20%3A海洋教育
176行

<img alt="" src="/Uploads/Pictures/55417042-CD9E-4858-8F31-92826D7E923F.jpg" style="width:100%;">

建議修改：

1.讓超連結自動斷行，在APA引註CSS標籤中加入word-break: break-all;width: 80%;。

<div class="apa-area" style="display: block;word-break: break-all;width: 80%;">
  1. 將圖片寬度設為百分比。
<img alt="" src="/Uploads/Pictures/55417042-CD9E-4858-8F31-92826D7E923F.jpg" style="width: 100%;">

補充：

(修正後之截圖)
21
22

#3

問題：

可能原因：

表格寬度設為固定數值，導致跑版。

原始程式：

1.圖片，位置：view-source:https://pulse.naer.edu.tw/Home/Content/347a984d-257c-4837-a85c-c81d6c43f34b?insId=a62f5a36-fcc2-45c5-a3cb-f5f31a179c56&categoryid=3a38eb7e-9928-41ed-aa8a-5b11ff0523d6&CurrentPage=1&parentName=第13期%20%3A海洋教育%20-%20教育櫥窗
176行

<table border="1" cellpadding="1" cellspacing="0" style="width:500px">

建議修改：

將表格寬度皆改為百分比。

<table border="1" cellpadding="1" cellspacing="0" style="width:100%">

補充：

(修正後之截圖)
image

#4

問題：

可能原因：

youtube供嵌入用的iframe原始碼是固定尺寸，因此無法隨著螢幕縮放。

原始程式：

1.圖片，位置：view-source:https://pulse.naer.edu.tw/Home/SpecailContent/2b561853-e32a-45a1-ad3f-3259a85160af?categoryid=00000000-0000-0000-0000-000000000000&CurrentPage=1
163行

<div class="text-left">
  <p><iframe width="640" src="//www.youtube.com/embed/yMh9EKsqUIM" height="360" frameborder="0" allowfullscreen=""></iframe></p>

建議修改：

  1. 在<head></head>中新增以下CSS。
.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;
}
  1. 在iframe外層div的class裡加入video-container。
<div class="text-left video-container">
  <p><iframe width="640" src="//www.youtube.com/embed/yMh9EKsqUIM" height="360" frameborder="0" allowfullscreen=""></iframe></p>

補充：

(修正後之截圖)
24

#5

問題：

可能原因：

對過寬表格未設置水平滾輪。

原始程式：

1.圖片，位置：view-source:https://pulse.naer.edu.tw/Home/Content/7904aa4b-f9fe-4ea5-ad9e-2af2039c2f4e?insId=a62f5a36-fcc2-45c5-a3cb-f5f31a179c56&categoryid=4ff808d8-9b3f-4023-8469-cfd69f858307&CurrentPage=1&parentName=第13期%20%3A海洋教育%20-%20教學分享
209行

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:none; width:558px">

建議修改：

  1. 在table外層加上<div style="overflow:auto;"></div>。
<div style="overflow:auto;">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:none; width:558px;">
    <tbody>
    .
    .
    .
  </table>
</div>

補充：

25