如何知道手機平板寬度? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

如何知道手機平板寬度?

mobile rwd css3

火爆浪子 2016-09-27 19:06:19 ‧ 3780 瀏覽

是這樣的我需要用RWD 所以需要知道手機和平板的實際寬度是多少
只是我查到的都是解析度不是實際的"寬度"
比如說 http://www.apple.com/tw/iphone/compare/
也想知道市售的平板電腦的寬度是多少
請問是否有資料可以參考呢
謝謝

看更多先前的討論...收起先前的討論...

窮嘶發發發 iT邦高手 1 級 ‧ 2016-09-28 09:15:39 檢舉

你根本不可能針對所有不同的寬度寫不同的CSS，
所以一般來說都是建議寫 4~5種解析度來處理，
而透過使用百分比以及網格去做調整，
再加上因應寬度變化，使用浮動物件的方式排列，
盡量減少固定位置物件，RWD 的基本原則就是如此
如果對 RWD CSS 該如何寫不甚了解，可以找BOOTSTARP 之類的套用即可
包括華碩技嘉以及很多大廠，他們的網站都使用這種開發套件進行網站設計

火爆浪子 iT邦研究生 1 級 ‧ 2016-09-28 13:54:51 檢舉

喔沒有我只是想大概知道平板最大的寬度是多少因為我是會將平板手機都套用成手機板除了平板手機以外的都是電腦版例如桌上型筆電

weiclin iT邦高手 4 級 ‧ 2016-09-28 21:01:47 檢舉

自己用解析度與ppi去計算吧 http://ayu6628.pixnet.net/blog/post/4807174

窮嘶發發發 iT邦高手 1 級 ‧ 2016-09-29 09:22:16 檢舉

給你參考國外的建議值吧
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
但基本上，這些建議值，只適用於英文網頁，中文網頁，某部分設定值要調整一下

窮嘶發發發 iT邦高手 1 級 ‧ 2016-09-29 09:25:54 檢舉

http://mydevice.io/devices/ 列出目前常見的解析度與實際長寬尺寸還有 CSS 建議值

窮嘶發發發 iT邦高手 1 級 ‧ 2016-09-29 09:26:43 檢舉

基本上，隨便找找就一堆資料可以參考啊，這些數據，國外蒐集的比較齊全

窮嘶發發發 iT邦高手 1 級 ‧ 2016-09-29 09:28:07 檢舉

如果你不想用解析度，可以改用 dpi ，可以參考下面這各說明
https://css-tricks.com/snippets/css/retina-display-media-query/

窮嘶發發發 iT邦高手 1 級 ‧ 2016-09-29 09:29:52 檢舉

改用 DPI 你就要自己計算了，因為大多數的平板因為尺寸與解析度，DPI 幾乎每一台都不一樣
你可以自己去衡量一個範圍，你自己再看看這些設定能不能達成你的要求

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 個回答

1

尼克

iT邦大師 1 級 ‧ 2016-09-29 11:10:09

最佳解答

jQuery取得各裝置視窗實際顯示的寬度、高度

回應 2
分享
檢舉

火爆浪子 iT邦研究生 1 級 ‧ 2016-09-29 15:54:31 檢舉

這個太棒囉!

火爆浪子 iT邦研究生 1 級 ‧ 2016-10-04 11:41:31 檢舉

但我發現平板好像就不太對?
我的ipad是980寬度
但是用RWD時設定1000寬度以下都套用手機板設定
ipad仍然會是電腦版...

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙