財政部台北國稅局-謝茵安

網站

財政部台北國稅局

姓名

謝茵安

檢測日期

2018-04-12

檢測裝置

SAMSUNG-J700F

作業系統 與 瀏覽器版本

Android 5.1.1
Chrome版本:Chrome 65.0.3325.181

解析度(手機螢幕)

螢幕解析度 360X640

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

壞掉的連結

1.沒有連結到正確網站
應該要連結到RICH的網站,但沒有連過去解法回文連結
首頁>公告訊息>就業資訊>107年青年暑期工讀計畫


2.顯示404解法同上
首頁>公告訊息>公告專區>行政院公報(連結至行政院公報資訊網)
首頁>政府資訊公開>法定項目>法律及法規命令>行政院公報資訊網
首頁>機關介紹>聯絡資訊>交通資訊>總局>微笑單車YOUBIKE

3.網頁顯示隱私權設定發生錯誤,手機一片空白解法同上
首頁>機關介紹>所屬單位>大同稽徵所>在地好厝邊>台北市稅捐稽徵處大同分處


跑版(影響閱讀)問題

1.表格跑掉解法回文連結
首頁>輪播圖:納稅者權利保護專區>納稅者權利保護官姓名及聯絡方式


2.文字跑掉解法同上
首頁>公告訊息>就業資訊>勞工權益申訴機制>本局勞務承攬派駐勞工權益維護申訴機制

3.查詢欄位跑掉,也不能往右滑解法同上
首頁>公告訊息>公告專區>公示送達>繳款書公示送達


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

出現亂碼

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

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

閱讀模式

Android系統

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

1.圖片有點跑掉,沒有對齊解法回文連結
首頁>機關介紹>所屬單位>中正分局>單位布告欄
首頁>機關介紹>所屬單位>士林稽徵所>在地好厝邊

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

1.有些頁面的圖片太小了,圖片無法再放大,導致有些資訊看不清。解法回文連結
首頁>機關介紹>所屬單位>中正分局>單位布告欄


2.整體而言網站設計得很不錯,沒有太大的問題,看起來也很舒適。

問題

可能原因

沒有找到該連結
圖片
手機模擬上是沒問題,會成功跳轉到新網頁

問題

可能原因

bootstrap設定錯誤

原始程式

位置:https://www.ntbt.gov.tw/etwmain/front/ETW118W/CON/2474/7664805291177236387:1718

                            <p class="content"><table style="width: 100%; margin-left: auto; margin-right: auto;" border="1" summary="納稅者權利保護官相關資料清單">
<tbody>
<tr><th id="group0" style="text-align: center; background-color: #5c6165; width: 9%;"><span style="color: #ffffff; font-size: medium;"><strong>姓名</strong></span></th><th style="text-align: center; background-color: #5c6165; width: 6%;" headers="group0"><span style="color: #ffffff; font-size: medium;"><strong>性別</strong></span></th><th style="text-align: center; background-color: #5c6165; width: 9%;" headers="group0"><span style="color: #ffffff; font-size: medium;"><strong>職稱</strong></span></th><th style="text-align: center; background-color: #5c6165;" headers="group0"><span style="color: #ffffff; font-size: medium;"><strong>聯絡電話</strong></span></th><th style="text-align: center; background-color: #5c6165;" headers="group0"><span style="color: #ffffff; font-size: medium;"><strong>傳真</strong></span></th><th style="text-align: center; background-color: #5c6165;" headers="group0"><span style="color: #ffffff; font-size: medium;"><strong>電子郵件</strong></span></th><th style="text-align: center; background-color: #5c6165;" headers="group0"><span style="color: #ffffff; font-size: medium;"><strong>地址</strong></span></th><th style="text-align: center; background-color: #5c6165;" headers="group0"><span style="color: #ffffff; font-size: medium;"><strong>任期</strong></span></th></tr>
<tr>
<td style="text-align: center;"  ......

建議修改

bootstrap有內建RWD Table的class implement叫做「table-responsive」的class
基本上只要在原本的table tag外面包一層table-responsive的class就好

<div class="table-responsive">
<table style="width: 100%; margin-left: auto; margin-right: auto; ......

補充


如圖,變成可以左右滑動

問題

可能原因

首先這個跟其他上面的問題有一個相同處,如果要用table都記得要加上table-responsive這個class
其次是這個純圖片的排版其實可以用bootstrap內建的grid系統

原始程式

位置:https://www.ntbt.gov.tw/etwmain/web/ETW118W/CON/1642/7876082688176241144?tagCode= :1921

<table border="0" cellpadding="5" summary="">
<tbody>
<tr>
<td id="group18">&nbsp;<img src="https://www.ntbt.gov.tw/etwmain/download?sid=14f73997e0600000ab6b543fd2bc88cf" alt="租稅教育、稅務講習會及宣導活動與民眾互動花絮照片,共11張" /></td>
<td headers="group18"><img src="https://www.ntbt.gov.tw/etwmain/download?sid=14f73 ......

建議修改

把table換成grid

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4"><img src="https://www.ntbt.gov.tw/etwmain/download?sid=14f73997e0600000ab6b543fd2bc88cf" alt="租稅教育、稅務講習會及宣導活動與民眾互動花絮照片,共11張"></div>
    <div class="col-6 col-md-4"><img src="https://www.ntbt.gov.tw/etwmain/download?sid=14f7399a481000003a66c1dfccc681a3" alt=""></div>
    <div><img src="https://www.ntbt.gov.tw/etwmain/download?sid=14f7399d0330000012a0ac7ee0c42a22" alt=""></div>
  </div>
  ......
</div>

補充

圖片
上面是有修過的,下面是原本沒修過的

問題

可能原因

可以的話還是希望不要用table,用了table無論是內文或圖片或表格,在手機上變形都是很正常不意外的事情,還是建議用前面提到的解法
如果堅持不想修改的話,可以幫每張圖片加上highslide.js
範例程式如下

<link rel="stylesheet" type="text/css" href="/highslide/highslide.css">
...
<a id="pic_a" href=[big_pic_location] class="highslide" onclick="return hs.expand (this, { wrapperClassName: 'wide-border'})">
		<img src=[small_pic_location] alt="Highslide JS" title="Click to enlarge" width="80vw" height="80vh">
	</a>