北水資源局全球資訊網－龎袿方

ray 經濟部
#1

網站

北水資源局全球資訊網

姓名

龎袿方

日期

2017-11-15

瀏覽器解析度（iOS的Safari填裝置名稱 macOS填瀏覽器解析度）

iPad Air (MD789TA/B)

作業系統版本

Windows 10 專業版（SP1）
11.0.3 (15A432)）

瀏覽器版本（iOS的Safari填iOS版本）

Chrome：版本 61.0.3163.100 (正式版本) (64 位元)
Safari：版本 11.0.3 (15A432)

有發現表格排版影響閱讀問題（大量table爆炸可以截示意圖列出位置就好）

無

有跑版（影響閱讀）問題

圖1

圖1

有出現亂碼

無

有壞掉的連結

無

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

無|N/A

有不能運作的網頁元素（如按鈕不能按、選單不能選等）

無

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

對此網站建議（給個建議吧）

基本上所有分頁用iPad看都會跑版，但其他內容都沒有問題。

#2

可能的原因：

看起來是 RWD 寫得不好

原始程式：

https://www.wranb.gov.tw/GIPDSD/xslGip/xslExport/5/main_html5//css/design.css

/* Mobile */
@media only screen and (max-width: 767px) {
	
	table.tablelist01in { margin-bottom: 0; }
	
	.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 25%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
	.pinned table { border-right: none; border-left: none; width: 100%; }
	.pinned table th, .pinned table td { white-space: nowrap; }
	.pinned td:last-child { border-bottom: 0; }
	
	div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
	div.table-wrapper div.scrollable table { margin-left: 25%; }
	div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }	
	
	table.tablelist01in td, table.tablelist01in th { position: relative; white-space: nowrap; overflow: hidden; }
	table.tablelist01in th:first-child, table.tablelist01in td:first-child, table.tablelist01in td:first-child, table.tablelist01in.pinned td { display: none; }
	.slogan { 
      display: none;
	  }
}

建議修改：

/* Mobile */
@media only screen and (max-width: 800px) {
	
	table.tablelist01in { margin-bottom: 0; }
	
	.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 25%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
	.pinned table { border-right: none; border-left: none; width: 100%; }
	.pinned table th, .pinned table td { white-space: nowrap; }
	.pinned td:last-child { border-bottom: 0; }
	
	div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
	div.table-wrapper div.scrollable table { margin-left: 25%; }
	div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }	
	
	table.tablelist01in td, table.tablelist01in th { position: relative; white-space: nowrap; overflow: hidden; }
	table.tablelist01in th:first-child, table.tablelist01in td:first-child, table.tablelist01in td:first-child, table.tablelist01in.pinned td { display: none; }
	.slogan { 
      display: none;
	  }
}
#3

可能的原因：

濫用 nowrap