HTML5移動Web開發（九）——優化瀏覽器視口寬度設置

時間 2019-11-30

標籤 html5 html 移動 web 開發優化瀏覽器寬度設置欄目 HTML5 简体版

原文原文鏈接

每一個移動設備都有本身默認的視口寬度，若是你不顯示的設置它的值，在渲染頁面的時候你可能會得不到你想要的效果。好比，若是不設置iPhone的視口寬度，它將會按照980像素的寬度渲染頁面，若是你的頁面設計不是按照這個像素寬度作的，大家出來的效果就會不盡如人意了。 html

什麼是視口(viewport)?
爲了手機能得到良好的網頁瀏覽體驗，Apple在移動版的Safari中引入了viewport meta標籤，他的做用就是建立一個虛擬的視口，而這個虛擬窗口的分辨率接近於桌面顯示器，Apple將其默認爲980px，其餘瀏覽器廠商也引入了這個技術，可是虛擬窗口的分辨率默認值就各有不一樣了。windows

新建ch02r03.html
咱們能夠經過以下的方式來優化上面提到的視口寬度問題。瀏覽器

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <!-- 
  1.若是沒有這句，在移動設備上運行該例子，該頁面的字體會變得很是小，很難辨認。
  2.加上該句，該屬性會告訴瀏覽器視口的寬度已經等於設備的可視寬度，不須要縮放頁面來適應設備的屏幕大小。所以對iPhone來講，視口的寬度在豎屏模式下是320px，橫屏模式下是480px。
   -->
  <meta name="viewport" content="width=device-width">
    <style>
    </style>
  </head>
  <body>
    <header>
      HTML5 Cookbook
    </header>
    <div id="main">
    <h1>Lorem ipsum</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <footer>
    </footer>
  </body>
</html>

運行效果圖：app

有些古老的移動設備瀏覽器不能識別"viewport"屬性，對於這些瀏覽器你須要使用以下的代碼來處理視口寬度問題：ide

關於Windows Phone上的IE瀏覽器的視口文檔
有一篇關於Windows Phone7上的IE瀏覽器的視口問題的文章，給出了對開發中很是有用的信息，好比，Windows Phone7平臺上的IE瀏覽器是如何實現"device-width"屬性的等。
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx 優化

關於Safari的視口文檔
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.htmlui

關於黑莓的視口文檔
http://docs.blackberry.com/en/developers/deliverables/4305/BlackBerry_Browser-4.6.0-US.pdfspa