國立海洋生物博物館--楊珣

ysr0989386698 · 2018年04月09日00:49

網站

國立海洋生物博物館

姓名

楊珣

檢測日期

2018-04-09

檢測裝置

sony xperia ultra xa

作業系統與瀏覽器版本

Android 7.0
Chrome版本：Chrome 65.0.3325.181

解析度（手機螢幕）

360x640 pixels

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

是

壞掉的連結

無

跑版（影響閱讀）問題

問題一(圖片跑版) 解法回文連結

首頁 > 最新動態 > 電子報

首頁 > 水族館 > 展館線上看 > 多媒體導覽 > 360度導覽(子項目都有這麼問題)

首頁 > 館務互動 > 交通資訊 > 交通位置圖

首頁 > 教育資源 > 國中小教學資源 >溪流水域生態環境

首頁 > 教育資源 > 國中小教學資源 > 沼澤水域生態環境

首頁 > 教育資源 > 國中小教學資源 > 池塘水域生態環境

(範例一)

問題二(表格跑版) 解法回文連結

首頁 > 研究及保育 > 保育 > 白鯨研究與照護

首頁 > 研究及保育 > 研究主題網 > 研究動態 > 歷年研究成果統計

(範例二)

問題三(文字跑版)

首頁 > 特展/活動 > 特展介紹

首頁 > 特展/活動 > 特展介紹 > 天使與魔鬼

首頁 > 特展/活動 > 科教活動 > 107年第一季環境教育增能計畫-珊瑚環境教育種子教師培訓

(範例三)

問題四(內容跑版) 解法回文連結

首頁 > 館務互動 > 我要諮詢 > 諮詢信箱

(範例四)

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

問題一(按鈕會自動導回首頁)

首頁 > 最新動態 > 主題專區 > 研究保育 > 寄居蟹保育/陸蟹保育

(範例一)

出現亂碼

無

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

無

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

有

閱讀模式

使用Android系統

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

問題一(字好擠好難閱讀喔) 解法回文連結

首頁 > 水族館展區介紹 > 展區內容介紹 > 台灣水域館(子項目都有這問題)

首頁 > 水族館展區介紹 > 展區內容介紹 > 珊瑚王國館(子項目都有這問題)

首頁 > 水族館展區介紹 > 展區內容介紹 > 世界水域館(子項目都有這問題)

(範例一)

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

需要改善的地方
1.網站導覽好難找喔，有種尋寶的感覺。
2.網站導覽介面可以參考公平交易委員會的樣子，一眼就能明瞭網站的內容。

覺得很棒的地方
1.主題專區的編排很賞心悅目
2.可以看很多海洋生物，覺得療癒。

youyuchen.alice · 2018年04月18日18:12

問題：

可能原因：

圖片寬度、長度設為固定數值，導致跑版。

原始程式：

<img class="FirstImg" height="130px" width="97" src="https://ws.nmmba.gov.tw/001/Upload/217/relpic/6411/9147/43ec8c3f-d82b-43aa-9de3-13f0a55bc350.jpg" alt="相關圖片">

建議修改：

將圖片寬度改成百分比。

<img class="FirstImg" width="100%" src="https://ws.nmmba.gov.tw/001/Upload/217/relpic/6411/9147/43ec8c3f-d82b-43aa-9de3-13f0a55bc350.jpg" alt="相關圖片">

補充：

(修正後截圖)

youyuchen.alice · 2018年04月18日18:21

問題：

可能原因：

表格結構未因應行動版面做變化，不易閱讀。

建議修改：

如要方便使用者閱讀，需將表格結構重新排列，參考解法：行政院農業委員會-林文琦 - #2 youyuchen.alice

youyuchen.alice · 2018年04月18日18:43

問題：

可能原因：

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

原始程式：

<tbody><tr>
            <th width="15%" class="form03" nowrap="nowrap" align="right" valign="top">
                <span class="red01">*</span>
                <label for="ContentPlaceHolder1_txtColumn_12" id="ContentPlaceHolder1_litEmail">信箱</label>
            </th>
            <td>
                <input name="ctl00$ContentPlaceHolder1$txtColumn_12" type="text" id="ContentPlaceHolder1_txtColumn_12" style="width:350px;">
                <span id="ContentPlaceHolder1_RegularExpressionValidator1" style="visibility:hidden;">*
                </span>
                <span id="ContentPlaceHolder1_rfvColumn_12" style="visibility:hidden;">*</span>
            </td>
        </tr>
        <tr>
        <th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_141">諮詢類別</label></th><td align="left"><select name="ctl00$ContentPlaceHolder1$c_141" id="ContentPlaceHolder1_c_141">
            <option selected="selected" value="84">諮詢</option>
            <option value="85">申訴</option>
            <option value="86">建議</option>
            <option value="87">其它</option>

        </select><span>請正確填寫類別，以利我們更快瞭解。</span></td>
    </tr><tr>
        <th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_120">發表主題</label></th><td align="left"><input name="ctl00$ContentPlaceHolder1$c_120" type="text" id="ContentPlaceHolder1_c_120" placeholder="請輸入" style="width:350px;"><span id="ContentPlaceHolder1_rfv_120" style="visibility:hidden;">*</span></td>
    </tr><tr>
        <th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_121">您的姓名</label></th><td align="left"><input name="ctl00$ContentPlaceHolder1$c_121" type="text" id="ContentPlaceHolder1_c_121" placeholder="請輸入" style="width:350px;"><span id="ContentPlaceHolder1_rfv_121" style="visibility:hidden;">*</span></td>
    </tr><tr>
        <th align="right"><label for="ContentPlaceHolder1_c_122">連絡方式</label></th><td align="left"><input name="ctl00$ContentPlaceHolder1$c_122" type="text" id="ContentPlaceHolder1_c_122" style="width:350px;"></td>
    </tr><tr>
        <th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_123">留言內容</label></th><td align="left"><textarea name="ctl00$ContentPlaceHolder1$c_123" rows="4" cols="20" id="ContentPlaceHolder1_c_123" placeholder="請輸入" style="width:400px;"></textarea><span id="ContentPlaceHolder1_rfv_123" style="visibility:hidden;">*</span></td>
    </tr><tr>
        <th align="right"><label for="ContentPlaceHolder1_c_124">上傳附件1</label></th><td align="left"><input type="file" name="ctl00$ContentPlaceHolder1$c_124" id="ContentPlaceHolder1_c_124"></td>
    </tr><tr>
        <th align="right"><label for="ContentPlaceHolder1_c_125">上傳附件2</label></th><td align="left"><input type="file" name="ctl00$ContentPlaceHolder1$c_125" id="ContentPlaceHolder1_c_125"></td>
    </tr><tr>
        <th align="right"><label for="ContentPlaceHolder1_c_126">上傳附件3</label></th><td align="left"><input type="file" name="ctl00$ContentPlaceHolder1$c_126" id="ContentPlaceHolder1_c_126"></td>
    </tr>


        <tr>
            <th align="right" valign="top">
                <label for="ContentPlaceHolder1_txtVali" id="ContentPlaceHolder1_lbValiCode">驗證碼</label>
            </th>
            <td><table>
                    <tbody><tr>
                        <td>
                            <img id="ContentPlaceHolder1_Imgchkcode" src="/Common/CheckCode.aspx?t=E51F88B96090F2BF" alt="驗證碼">
                        </td>
                        <td>
                            <label for="ContentPlaceHolder1_txtVali"></label>
                            <input name="ctl00$ContentPlaceHolder1$txtVali" type="text" id="ContentPlaceHolder1_txtVali" style="width:60px;">
                            <span id="ContentPlaceHolder1_rfvValiCode" style="display:none;">*</span>
                        </td>
                        <td>
                            <input type="submit" name="ctl00$ContentPlaceHolder1$btnRefreshValiCode" value="重新產生" id="ContentPlaceHolder1_btnRefreshValiCode" class="ButtonStyle" onkeypress="this.click();">
                            
<!-- 調用jQuery版MP3播放器 -->

<input name="ctl00$ContentPlaceHolder1$uscValidVoice1$btnVoice" type="button" id="ContentPlaceHolder1_uscValidVoice1_btnVoice" value="語音撥放" class="ButtonStyle" onclick="playvoice();" onkeypress="this.click();">
<noscript>您的瀏覽器不支援javascript,您的瀏覽器無法支援此功能,請打開javascript後重新整理</noscript>
<div style="height:0px;">
    <div id="jp_container_N">
        <div id="jquery_jplayer_N" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><audio id="jp_audio_0" preload="metadata" src=""></audio></div>
        <div class="jp-playlist" style="display:none;">
            <ul style=""><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">T.mp3</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">A.mp3</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">W.mp3</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">J.mp3</a></div></li></ul>
        </div>
    </div>

</div>
                        </td>
                    </tr>          
            </tbody></table> </td>
        </tr>
        <tr>
            <td class="form03" colspan="2" align="left">
                <div id="ContentPlaceHolder1_ValidationSummary1" style="color:Red;display:none;">

</div>
            </td>
        </tr>
        <tr>
            <td class="form03" colspan="2" align="center">
                <input type="button" onclick="this.disabled = true; document.getElementById('ContentPlaceHolder1_btnOK').click();" value="確定" class="ButtonStyle_H2">
                <input type="submit" name="ctl00$ContentPlaceHolder1$btnOK" value="確定" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnOK&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ContentPlaceHolder1_btnOK" class="ButtonStyle_H2" onkeypress="this.click();" style="display:none">                
            </td>
        </tr>
  </tbody>

建議修改：

將表格欄位寬度改成百分比。

<tbody>
    <tr>
        <th width="15%" class="form03" nowrap="nowrap" align="right" valign="top">
            <span class="red01">*</span>
            <label for="ContentPlaceHolder1_txtColumn_12" id="ContentPlaceHolder1_litEmail">信箱</label>
        </th>
        <td>
            <input name="ctl00$ContentPlaceHolder1$txtColumn_12" type="text" id="ContentPlaceHolder1_txtColumn_12" style="width:85%;">
            <span id="ContentPlaceHolder1_RegularExpressionValidator1" style="visibility:hidden;">*
            </span>
            <span id="ContentPlaceHolder1_rfvColumn_12" style="visibility:hidden;">*</span>
        </td>
    </tr>
    <tr>
	<th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_141">諮詢類別</label></th><td align="left"><select name="ctl00$ContentPlaceHolder1$c_141" id="ContentPlaceHolder1_c_141">
		<option selected="selected" value="84">諮詢</option>
		<option value="85">申訴</option>
		<option value="86">建議</option>
		<option value="87">其它</option>

	</select><span style="width:60%;display:block;">請正確填寫類別，以利我們更快瞭解。</span></td>
	</tr><tr>
		<th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_120">發表主題</label></th><td align="left"><input name="ctl00$ContentPlaceHolder1$c_120" type="text" id="ContentPlaceHolder1_c_120" placeholder="請輸入" style="width:85%;"><span id="ContentPlaceHolder1_rfv_120" style="visibility:hidden;">*</span></td>
	</tr><tr>
		<th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_121">您的姓名</label></th><td align="left"><input name="ctl00$ContentPlaceHolder1$c_121" type="text" id="ContentPlaceHolder1_c_121" placeholder="請輸入" style="width:85%;"><span id="ContentPlaceHolder1_rfv_121" style="visibility:hidden;">*</span></td>
	</tr><tr>
		<th align="right"><label for="ContentPlaceHolder1_c_122">連絡方式</label></th><td align="left"><input name="ctl00$ContentPlaceHolder1$c_122" type="text" id="ContentPlaceHolder1_c_122" style="width:85%;"></td>
	</tr><tr>
		<th align="right"><span class="red01">*</span><label for="ContentPlaceHolder1_c_123">留言內容</label></th><td align="left"><textarea name="ctl00$ContentPlaceHolder1$c_123" rows="4" cols="20" id="ContentPlaceHolder1_c_123" placeholder="請輸入" style="width:85%;"></textarea><span id="ContentPlaceHolder1_rfv_123" style="visibility:hidden;">*</span></td>
	</tr><tr>
		<th align="right"><label for="ContentPlaceHolder1_c_124">上傳附件1</label></th><td align="left"><input type="file" name="ctl00$ContentPlaceHolder1$c_124" id="ContentPlaceHolder1_c_124"></td>
	</tr><tr>
		<th align="right"><label for="ContentPlaceHolder1_c_125">上傳附件2</label></th><td align="left"><input type="file" name="ctl00$ContentPlaceHolder1$c_125" id="ContentPlaceHolder1_c_125"></td>
	</tr><tr>
		<th align="right"><label for="ContentPlaceHolder1_c_126">上傳附件3</label></th><td align="left"><input type="file" name="ctl00$ContentPlaceHolder1$c_126" id="ContentPlaceHolder1_c_126"></td>
	</tr>


    <tr>
        <th align="right" valign="top">
            <label for="ContentPlaceHolder1_txtVali" id="ContentPlaceHolder1_lbValiCode">驗證碼</label>
        </th>
        <td><table>
                <tbody><tr>
                    <td>
                        <img id="ContentPlaceHolder1_Imgchkcode" src="/Common/CheckCode.aspx?t=42D4B6A9C1113EEA" alt="驗證碼">
                    </td>
                    <td>
                        <label for="ContentPlaceHolder1_txtVali"></label>
                        <input name="ctl00$ContentPlaceHolder1$txtVali" type="text" id="ContentPlaceHolder1_txtVali" style="width:30%;">
                        <span id="ContentPlaceHolder1_rfvValiCode" style="display:none;">*</span>
                    </td>
                    <td>
                        <input type="submit" name="ctl00$ContentPlaceHolder1$btnRefreshValiCode" value="重新產生" id="ContentPlaceHolder1_btnRefreshValiCode" class="ButtonStyle" onkeypress="this.click();">
                            
                        <!-- 調用jQuery版MP3播放器 -->

                        <input name="ctl00$ContentPlaceHolder1$uscValidVoice1$btnVoice" type="button" id="ContentPlaceHolder1_uscValidVoice1_btnVoice" value="語音撥放" class="ButtonStyle" onclick="playvoice();" onkeypress="this.click();">
                        <noscript>您的瀏覽器不支援javascript,您的瀏覽器無法支援此功能,請打開javascript後重新整理</noscript>
                        <div style="height:0px;">
                            <div id="jp_container_N">
                                <div id="jquery_jplayer_N" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><audio id="jp_audio_0" preload="metadata" src=""></audio></div>
                        		<div class="jp-playlist" style="display:none;">
                        			<ul style=""><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">V.mp3</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">T.mp3</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">N.mp3</a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">R.mp3</a></div></li></ul>
                        		</div>
                            </div>
                        </div>
                    </td>
                </tr>          
        </tbody></table> </td>
    </tr>
    <tr>
        <td class="form03" colspan="2" align="left">
            <div id="ContentPlaceHolder1_ValidationSummary1" style="color:Red;display:none;">
            </div>
        </td>
    </tr>
    <tr>
        <td class="form03" colspan="2" align="center">
            <input type="button" onclick="this.disabled = true; document.getElementById('ContentPlaceHolder1_btnOK').click();" value="確定" class="ButtonStyle_H2">
            <input type="submit" name="ctl00$ContentPlaceHolder1$btnOK" value="確定" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnOK&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ContentPlaceHolder1_btnOK" class="ButtonStyle_H2" onkeypress="this.click();" style="display:none">                
        </td>
    </tr>
</tbody>

補充：

(修正後截圖)

youyuchen.alice · 2018年04月18日19:14

問題：

可能原因：

<ul>寬度被限制，影響閱讀。

原始程式：

https://www.nmmba.gov.tw/css/detail.css:1

.data_midlle_news.news_cus1 ul .link_box ul, .data_midlle_news.news_cus2 ul .link_box ul {
    overflow: hidden;
}

建議修改：

將文字段落放置於圖片下方。

.data_midlle_news.news_cus1 ul .link_box ul, .data_midlle_news.news_cus2 ul .link_box ul {
    overflow: hidden;
    float: right;
}

補充：

(修正後截圖)

國立海洋生物博物館--楊珣

網站

姓名

檢測日期

檢測裝置

作業系統 與 瀏覽器版本

解析度（手機螢幕）

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

壞掉的連結

跑版（影響閱讀）問題

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

出現亂碼

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

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

閱讀模式

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

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

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

建議修改：

問題：

可能原因：

原始程式：

建議修改：

補充：

問題：

可能原因：

原始程式：

建議修改：

補充：

作業系統與瀏覽器版本