文化部國立台灣文學館-邵嘉嶸

網站

國立台灣文學館


姓名

邵嘉嶸


檢測日期

2018-04-12


檢測裝置

iPhone 7


作業系統 與 瀏覽器版本

iOS 11.3


解析度(手機螢幕)

375x667 pixels


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


壞掉的連結


跑版(影響閱讀)問題


圖片導致跑板(解法回文連結)


網址導致跑板(解法回文連結)


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


出現亂碼


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


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


閱讀模式

可以用


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



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

  • 不錯且資料整齊的好網站

  • 看得出來有做基本維護,不過要注意特殊元件跑板問題(ex圖片、網址)
  • 很多圖片變形了

  • 可以試看看調成比較小但是原本比例會比較好
  • 無障礙專區的按鈕可以改到首頁

  • 要先點無障礙服務才能進無障礙專區不太方便

問題

可能原因:

CSS 設定錯誤

原始程式:

圖片

<p style=" margin-right: -24.1pt; text-align: left;" data-mce-style="margin-right: -24.1pt; text-align: left;">
  <strong>
    <span style="color: gray;" data-mce-style="color: gray;">
      <img style="max-width: 100%;width: 100%;height: auto;" alt="合影(右至左)高雄市歷史博物館研究組莊書豪、臺灣文學館廖振富館長、作家何敬堯、施炳華教授、作家瀟湘神、策展人王嘉玲.JPG" src="https://mocfile.moc.gov.tw/files/201803/a382c026-0344-445d-93d8-cb67a759c936.jpg" data-mce-src="https://mocfile.moc.gov.tw/files/201803/a382c026-0344-445d-93d8-cb67a759c936.jpg" data-mce-style="max-width: 100%;" width="461" height="307">&nbsp;
    </span>
  </strong>
</p>

圖片底下橘字

<p style="text-align: justify;line-height: 115%;" data-mce-style="margin-right: -24.1pt; text-align: left;">
  <span style="color: rgb(255, 102, 0);" data-mce-style="color: #ff6600;">合影(右至左)高雄市歷史博物館研究組莊書豪、臺灣文學館廖振富館長、作家何敬堯、施炳華教授、作家瀟湘神、策展人王嘉玲
  </span>
</p>

建議修改:

圖片:刪除margin-right

{
    text-align: left;
}

圖片底下橘字 : 將其style改成跟下方<p>一樣

{
    text-align: justify;
    line-height: 115%;
}

補充

問題

實測

手機版及電腦模擬器都沒出現附圖狀況


問題

可能原因:

CSS 設定錯誤

原始程式:

<p style="text-align: justify;">
<span lang="EN-US">  </span>
<span>國立臺灣文學館‧齊東詩舍「2017城東講堂」系列講座壓軸場將於12月17日(日)下午2時至4時舉辦,本場次邀請到臺灣音樂創作人朱約信(藝名朱頭皮)擔任主講人,講題「臺灣第一張文學音樂專輯:楊逵─《鵝媽媽出嫁》」,在冬風吹拂的歲末,與大家一同分享當文學碰上音樂所激起的動人樂符。網路報名即日起開放登記,請上國立臺灣文學館官網(活動訊息/講座訊息/城東講堂/<span>臺灣第一張文學音樂專輯:楊逵-《鵝媽媽出嫁》</span>)</span>
<a href="https://event.culture.tw/NMTL/portal/Registration/C0103MAction?useLanguage=tw&amp;actId=70017"><span>https://event.culture.tw/NMTL/portal/Registration/C0103MAction?useLanguage=tw&amp;actId=70017</span></a><span>。</span>
</p>

建議修改:

最外面的<p>word-wrap

{
    text-align: justify;
    word-wrap: break-word;
}

補充

結尾

下述問題皆為同一解法

問題

可能原因:

沒有設想到

建議修改:

電腦版網頁也都有換行,如果真的要改我會建議寫成兩個element再排版成對齊的樣式