國立海洋生物博物館-盧苡萱

網站

國立海洋生物博物館

姓名

盧苡萱

檢測日期

2018-04-15

檢測裝置

iphone7

作業系統 與 瀏覽器版本

iOS11.2

解析度(手機螢幕)

375x667

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

壞掉的連結

跑版(影響閱讀)問題

[color=red]表格跑版[/color] (解法回文連結)


[color=red]文字跑版[/color] (解法回文連結)

範例
04

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

[color=red]按鈕不能按[/color] (解法回文連結)


[color=red]按鈕點下會跳回首頁[/color] (解法回文連結)

範例
33

出現亂碼

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

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

閱讀模式

不可用

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

[color=red]從行動版跳出到網頁版(是否沒有行動版?)[/color] (解法回文連結)

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

[color=red]有很多美麗的水族圖片,讓整個網站看起來很生動活潑[/color]


[color=red]圖片畫素太低[/color]


[color=red]圖片太小[/color] (解法回文連結)

1個讚

問題:

可能原因:

margin造成表格超版

原始程式:

以 首頁>最新動態>影音專區 為例
位置:https://www.nmmba.gov.tw/css/detail.css :1

.mv_list_box .mv_list ul span span {
  	width: 29%;
  	float: left;
  	-moz-box-shadow: 0px 0px 16px #898989;
  	-webkit-box-shadow: 0px 0px 16px #898989;
  	box-shadow: 0px 0px 2px #898989;
  	margin: 10px;
  	background-color: #f6f4f0;
}

建議修改:

將margin限制為上下

.mv_list_box .mv_list ul span span {
  	width: 29%;
  	float: left;
  	-moz-box-shadow: 0px 0px 16px #898989;
  	-webkit-box-shadow: 0px 0px 16px #898989;
  	box-shadow: 0px 0px 2px #898989;
  	margin: 10px 0;
  	background-color: #f6f4f0;
}

補充:

aspx_n=A36A5CEFA29376CE&sms=14F997EC59624E90(iPhone 6_7_8)


問題:

原始程式:

位置:國立海洋生物博物館-交通位置圖

建議修改:

已測試,問題無法複現

補充:

aspx_n=F88AE745629C8209&s=70BFA54CEA821391(iPhone 6_7_8)


問題:

原始程式:

位置:國立海洋生物博物館-諮詢信箱

建議修改:

已測試,問題無法複現

補充:

aspx_n=51C3396156BD599E&sms=88DF6A51E922696A(iPhone 6_7_8)


問題:

原始程式:

位置:國立海洋生物博物館-白鯨研究與照護

建議修改:

已測試,問題無法複現

補充:

aspx_n=9E3D6DAB9708DB4C&s=FDCD0AE1B7596F11(iPhone 6_7_8)


問題:

原始程式:

位置:國立海洋生物博物館-溪流水域生態環境

建議修改:

已測試,問題無法複現

補充:

aspx_n=10AEB7B38956F518&s=1BA004FBD88CEF84(iPhone 6_7_8)


問題:

原始程式:

位置:國立海洋生物博物館-沼澤水域生態環境

建議修改:

已測試,問題無法複現

補充:

aspx_n=1B9564664158991B&s=7F245332EA31CEB4(iPhone 6_7_8)


問題:

原始程式:

位置:國立海洋生物博物館-池塘水域生態環境

建議修改:

已測試,問題無法複現

補充:

aspx_n=C7B9AE0803905C2E&s=1F876C2478638935(iPhone 6_7_8)


問題:

可能原因:

表格沒有自動換行

原始程式:

位置:https://www.nmmba.gov.tw/css/cp.css :1

.data_midlle_cp table table td {
	vertical-align: middle;
}

建議修改:

.data_midlle_cp table table td {
	vertical-align: middle;
	word-break: break-word;
}

補充:

aspx_n=E6FCD528A12BE008&s=646638A5CA1E5106(iPhone 6_7_8)

問題:

可能原因:

float靠左,長寬受限

原始程式:

以 首頁 >水族館>展區介紹 >台灣水域館>入口瀑布、高山河流、河流中游、河流溪緣、水庫 為例
位置:https://www.nmmba.gov.tw/css/detail.css :1

.data_midlle_news.news_cus2 ul .link_box a {
	float: left; 
	overflow: hidden;
	height: inherit;
}
@media (max-width: 768px)
.data_midlle_news.news_cus1 ul .link_box a, .data_midlle_news.news_cus2 ul .link_box a {
	float: inherit;
	display: block;
	margin: 0 auto;
	width: 150px;
}

建議修改:

上段刪除整段,下段刪除width
然後可在圖片上加上width:100%,max-width:500px等屬性

補充:

aspx_n=99E24DAAC84279E4&CategorySN=96(iPhone 6_7_8) (1)


問題:

可能原因:

圖片寬度被寫死

原始程式:

位置:國立海洋生物博物館-陸蟹保育 :599

<img alt="紅螯螳臂蟹照片" src="http://ws.nmmba.gov.tw/001/Upload/217/ckfile/a9732e46-635b-4652-83ac-efa4b00cbbd5.jpg" style="border-width: 0px; border-style: solid; margin-left: 10px; margin-right: 10px; float: right; width: 250px; height: 174px;">

建議修改:

<img alt="紅螯螳臂蟹照片" src="http://ws.nmmba.gov.tw/001/Upload/217/ckfile/a9732e46-635b-4652-83ac-efa4b00cbbd5.jpg" style="border-width: 0px;border-style: solid;margin-left: 10px;margin-right: 10px;float: right;max-width: 500px;width:  100%;height: auto;">

補充:

aspx_n=DEFFECF3DA56A58E&s=21B27E3988D685F8(iPhone 6_7_8)

問題:

可能原因:

呃…他不是按鈕

原始程式:

位置:https://www.nmmba.gov.tw/News_Content.aspx?n=8929A8F90C63BDDF&sms=AEA52654EE0F64A5&s=5575220588DF9A6A

建議修改:

已測試,不需修改

結尾:

可能顏色易造成誤會為連結,可考慮換色

問題:

原始程式:

位置:國立海洋生物博物館-主題專區

建議修改:

已測試,問題無法複現

補充:

aspx_n=0A45E08BBAC4469C&s=102663AFD2944315(iPhone 6_7_8) aspx_n=DEFFECF3DA56A58E&s=21B27E3988D685F8(iPhone 6_7_8) (1)

問題:

可能原因:

沒有行動版

原始程式:

位置:http://study.nmmba.gov.tw/CP.aspx?TabID=34

建議修改:

此為子網域,非檢測範圍
已測試,無行動版網頁

問題:

可能問題:

受到程式限制長寬

建議修改:

大部分的圖可以不用縮到那麼小~~