好歹也是花了一些時間看的東西, 備忘一下。
- orientation (landscape or portrait) 不是重點, 重點是螢幕寬度到底是幾 pixel
- 結論: 用 device-width
《Mobile web design viewport size vs screen resolution - viewport META tag》
- 詳述 viewport 為何, 覺得重述一次意思會不對, 還是請大家看原文吧
- mobile device 的 viewport 大小不見得和 screen 大小一樣 (桌機則是一致)
- 有些 mobile browser 像 mobile Safari 藉由讓 html 畫在較寬的 viewport 上, 再將它縮放到符合螢幕寬度, 藉此顯示整個網頁的大概樣子 (有時稱為 overview mode)。也就是說, 網頁會依 viewport 的寬度來 render, 而不是 screen 寬度。對桌機來說兩者寬度一樣, 所以不會混淆
- 各家 mobile browser 預設的 viewport 大小不同, 造成寫網頁的人的困擾
- 可用 <meta name="viewport"content="width=1100"/> 改變預設 viewport 寬度
- 可用 <meta name="viewport"content="width=device-width"/> 將 viewport 設為 device 寬度
- 舊手機不支援上述語法, 該連結有提到其它備案
《device-width and how not to hate your users》
- 可用 CSS 3 新語法 media-query 針對螢幕寬度決定使用的 CSS rules。對於桌機不同的螢幕寬度來說, 這是個好解法, 不用擔心使用者用 24" 寬螢幕還是 19" 一般螢幕。
- mobile device 另有 viewport 大小不同 screen 大小的特色, 所以使用 media-query 的話, 要再配合限制 viewport 寬度為 device-width, 才可確保用對 CSS rules
沒有留言:
張貼留言