教育部_國立臺灣科學教育館_穆邦妮

ray 教育部
, ,
#1

網站

教育部國立臺灣科學教育館

姓名

穆邦妮

檢測日期

2018-04-16

檢測裝置

iphone 6

作業系統 與 瀏覽器版本

ios 11.2

解析度（手機螢幕）

375x667 pixels

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

是

壞掉的連結

無

跑版（影響閱讀）問題

  1. 首頁>新知看板>最新消息>2018-0301…
    解法回文連結
    台灣科教館-1
  1. 首頁>認識科教館>館徽
    解法回文連結
    IMG_E3606
  1. 首頁>科教活動>其他活動>2017科普論壇…
    youtube有點跑版
    解法回文連結
    IMG_E3607
  1. 首頁>科教活動>其他活動>2017第五屆科學玩意節
    youtube跑版
    解法回文連結
    IMG_E3608
  1. 首頁>科教活動>其他活動>科學學習中心
    解法回文連結
    IMG_E3610
  1. 首頁>參觀服務>票價總覽
    解法回文連結
    IMG_E3612
  1. 首頁>展覽資訊>展區配置
    解法回文連結
    IMG_E3616
  1. 首頁>數位資源>桌布下載
    解法回文連結
    IMG_E3618
  1. 首頁>數位資源>科教影音
    解法回文連結
    IMG_E3619
  1. 首頁>出版品>科學研習月刊
    此網頁的選單皆有類似問題(圖片過大跑版)
    解法回文連結
    (1) e.g. 首頁>出版品>科學研習月刊>第57卷第4期
    科教館-2
    (2) e.g. 首頁>出版品>科學研習月刊>第57卷第3期
    科教館-3
  1. 首頁>政府公開資訊>單一窗口>線上申辦>預約導覽
    解法回文連結
    科教館-7
  1. 首頁>單一窗口>線上申辦>場地租用
    解法回文連結
    科教館-8

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

無

出現亂碼

無

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

無

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

無

閱讀模式

有些可以有些無法

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

  1. 科教館首頁
    手機版網站無麵包屑
    解法回文連結
    (圖一)手機版
    台灣科教館-2
    (圖二)電腦版
    台灣科教館-3

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

一、建議美編排版

  1. 首頁>新知看板>活動行事曆
    解法回文連結
    (圖一)手機版項目編排看起來較凌亂
    IMG_E3604
    (圖二)電腦版
    台灣科教館-4
  1. 首頁>科教活動>其他活動>科學DIY活動
    建議表格更易讀(文字置中、依照文字多寡調整表格大小…)
    解法回文連結
    IMG_E3611
  1. 首頁>參觀服務>導覽服務
    解法回文連結
    IMG_E3613
  1. 首頁>出版品>科學叢書>科展設計與實作
    解法回文連結
    科教館-1
  1. 首頁>政府公開資訊>便民服務>無線網路服務
    解法回文連結
    科教館-13
    科教館-14

二、選單重複，若是可以省略的部分，建議網站更精簡。
解法回文連結

  1. 首頁>政府公開資訊>單一窗口
    政府公開資訊下拉選單中的「單一窗口」與「線上申辦」重複，建議網站可以更精簡。
    科教館-9
  1. 首頁>政府公開資訊>線上申辦>館長信箱
    「政府公開資訊>線上申辦>館長信箱」與「館長信箱」選單重複，建議網站可以更精簡。
    科教館-10
  1. 首頁>政府公開資訊>業務報告>業務影音庫
    「數位資源>科教影音」與「政府公開資訊>業務報告>業務影音庫」內容重複。
    科教館-11
    科教館-12

三、其他建議

  1. 首頁>出版品>科教館館訊>105年12月科教館館訊
    此為空白頁面，建議發文後再檢查內容一遍。
    科教館-4
  1. 首頁>出版品>科教衍生商品
    填寫訂購單下方的「…」建議可以改成文字敘述「如附件」。
    科教館-5
  1. 首頁>出版品>訂閱方式
    (1)「網路書店」非「現場購買」類別，建議發文後再檢查內容一遍。
    (2) 建議網路書店可以附上連結。
    科教館-6
  1. 首頁>English
    英文版首頁跑掉
    解法回文連結
    科教館-15
#2

問題：

可能原因：

圖片太大張

原始程式：

位置:https://www.ntsec.gov.tw/common/css/theme/reset.css:3
找到

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #595757;
    font-family: Arial,Helvetica,"Microsoft JhengHei",Sans-Serif;
}

建議修改：

加上overflow屬性

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #595757;
    font-family: Arial,Helvetica,"Microsoft JhengHei",Sans-Serif;
    overflow: auto;
}

補充

圖片可以左右滑動
09 1

結尾(選填，可增加網站建議)

#3

問題：

可能原因：

圖片過大

原始程式：

位置:https://www.ntsec.gov.tw/common/css/theme/reset.css

建議修改：

在檔案中加入img屬性的寬度資料

img {
    width:  100%;
}

補充

03

結尾(選填，可增加網站建議)

#4

問題：

可能原因：

文字未換行

原始程式：

位置:https://www.ntsec.gov.tw/Common/css/reset.css:3
找到

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #595757;
    font-family: Arial,Helvetica,"Microsoft JhengHei",Sans-Serif;
}

建議修改：

加入word-break

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #595757;
    font-family: Arial,Helvetica,"Microsoft JhengHei",Sans-Serif;
    word-break: break-word;
}

補充

31

結尾(選填，可增加網站建議)

#5

問題：

可能原因：

可以左右滑動，無問題

原始程式：

無

建議修改：

無

補充

54

結尾(選填，可增加網站建議)

#6

問題：

可能原因：

設定錯誤

原始程式：

位置:https://www.ntsec.gov.tw/Common/css/content.css:667

.Tablecloth ul li .box *{
    /* float: left !important; */
    width: 100px ;
    height: 100px;
    display: block;
    color: #f57c25;
    border: 1px solid #F3F3F3;
}

位置:https://www.ntsec.gov.tw/Common/css/content.css:643

.Tablecloth ul li .name{
	position: absolute;
	left: 50%;
	top: 5%;
	color: #595757;
	font-size: 200%;
	line-height: initial;
	padding: 10px 20px ;
}

建議修改：

width加上important

.Tablecloth ul li .box *{
    /* float: left !important; */
    width: 100px !important;
    height: 100px;
    display: block;
    color: #f57c25;
    border: 1px solid #F3F3F3;
}

調整padding

.Tablecloth ul li .name{
	position: absolute;
	left: 50%;
	top: 5%;
	color: #595757;
	font-size: 200%;
	line-height: initial;
	padding: 10px 20px 1px 5px;
}

補充

24

結尾(選填，可增加網站建議)

#7

問題：

可能原因：

文字跑版

原始程式：

位置:https://www.ntsec.gov.tw/Common/css/content.css:964

.Video ul li a{
    width: 100%;
    height: 66px;
    display: block;
    padding: 10px 10px 0px 10px;
    margin: -10px 0 0 0;
    color: #fff;
}

建議修改：

加入line-height

.Video ul li a{
    width: 100%;
    height: 66px;
    display: block;
    padding: 10px 10px 0px 10px;
    margin: -10px 0 0 0;
    color: #fff;
    line-height: 1.5em;
}

補充

08

結尾(選填，可增加網站建議)

#8

問題：

可能原因：

排版設定錯誤

原始程式：

位置:https://www.ntsec.gov.tw/Common/css/content.css:2253

.Suggestion_Box ul li a{
    background-color: #F57C25;
    color: #fff;
    padding: 9px 18px !important;
    margin: 0 10px;
}

建議修改：

修改2257行的設定

.Suggestion_Box ul li a{
    background-color: #F57C25;
    color: #fff;
    padding: 9px 18px !important;
    margin: 0 !important;
}

補充

19

結尾(選填，可增加網站建議)

#9

問題：

可能原因：

建議手機版加入麵包屑，不處理

原始程式：

無

建議修改：

無

補充

無

結尾(選填，可增加網站建議)

#10

問題：

可能原因：

非問題，RWD自然現象，若很重要可以重新設計排版，不處理

原始程式：

無

建議修改：

無

補充

無

結尾(選填，可增加網站建議)

#11

問題：

可能原因：

設計問題，以程式碼來看並無錯誤

原始程式：

無

建議修改：

無

補充

無

結尾(選填，可增加網站建議)

#12

問題：

可能原因：

影片過大

原始程式：

位置:https://www.ntsec.gov.tw/common/css/theme/content.css:312

建議修改：

加入overflow設定

.Arrange_o_{
    overflow:  auto;
}

補充

非最佳解，但可以先使用
35

結尾(選填，可增加網站建議)

#13

問題：

可能原因：

設定已遵循RWD，可能為觀感問題，不處理

原始程式：

無

建議修改：

無

補充

無

結尾(選填，可增加網站建議)