設定 viewport 的寬度為 device-width 以支援各種 mobile browser

好歹也是花了一些時間看的東西, 備忘一下。

《The orientation media query》

  • 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

留言

這個網誌中的熱門文章

virtualbox 使用 USB 裝置

熟悉系統工具好處多多

如何 git merge 更改檔名的檔案