HTML5開發手機應用--viewport的做用

時間 2019-11-13

標籤 html5 html 開發手機應用 viewport 欄目 HTML5 简体版

原文原文鏈接

在用HTML5開發手機應用或手機網頁時，<head>部分總會有以下一段代碼，這段代碼到底什麼意思呢。在網上，你們會獲得不少答案。我從網上搜集了部分介紹，整理一下，以留備用。html

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

什麼是Viewport

　　手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。前端

width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
maximum-scale：容許用戶縮放到的最大比例。
minimum-scale：容許用戶縮放到的最小比例。
user-scalable：用戶是否能夠手動縮放web

　　「viewport」，翻譯爲中文能夠叫作「視區」，你們都知道移動設備的屏幕通常都比PC小不少，webkit瀏覽器會將一個較大的「虛擬」窗口映射到移動設備的屏幕上，默認的虛擬窗口爲980像素寬（目前大部分網站的標準寬度），而後按必定的比例（3：1或2：1）進行縮放。也就是說當咱們加載一個普通網頁的時候，webkit會先以980像素的瀏覽器標準加載網頁，而後再縮小爲490像素的寬度。注意這個縮小是一個全局縮小，也就是頁面上的全部元素都會縮小。以下圖所示，一個普通的文章頁面在移動設備的效果：瀏覽器

　　頁面以980像素加載，沒有變形，可是按比例縮放後，不少東西用肉眼基本看不清了。佈局

　　那麼咱們能不能人爲改變webkit的視區呢？固然能，在<head>與</head>之間加上以下視區代碼：post

<meta name="viewport" content="width=500"/>

　　咱們來看看頁面加上 強制視區大小命令後效果怎麼樣？以下圖所示：

　　那麼有沒有更好的方法呢？好比說咱們自動檢測移動設備屏幕大小，而後讓內容自適應。看下面的代碼， device-width將自動檢測移動設備的屏幕寬度：

<meta name="viewport" content="width=device-width" />

參考資料：http://www.cnblogs.com/loalongblogs/archive/2011/06/21/2085971.html優化

【做者】： @挨踢前端
【出處】： http://www.cnblogs.com/duanhuajian/ 【聲明】：全部博文標題後加（share）的表示收集的他人優秀文章，其他的則爲原創。歡迎轉載，但請在顯要位置顯示本文連接，並保留本段聲明，不然追究法律責任，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。