viewport專題：深入理解css中響應式 Web 設計-viewport

在行動裝置上進行網頁的重構或開發，首先得搞明白的就是行動裝置上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標籤的使用，才能更好地讓我們的網頁適配或回應各種不同解析度的行動裝置。

一、viewport的概念

通俗的講，行動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在預設情況下，一般來講，行動裝置上的viewport都是大於瀏覽器視覺區域的，這是因為考慮到行動裝置的解析度相對於桌上型電腦來說都比較小，所以為了能在行動裝置上正常顯示那些傳統的為桌面瀏覽器設計的網站，行動裝置上的瀏覽器都會把自己預設的viewport設為980px或viewport專題：深入理解css中響應式 Web 設計-viewport0viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewportpx（也可能是其它值，這個是由裝置自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器視覺區域的寬度是比這個預設的viewport的寬度要小的。下圖列出了一些裝置上瀏覽器的預設viewport的寬度。

二、css中的viewport專題：深入理解css中響應式 Web 設計-viewportpx並不等於裝置的viewport專題：深入理解css中響應式 Web 設計-viewportpx

    在css中我們一般使用px作為單位，在桌面瀏覽器中css的viewport專題：深入理解css中響應式 Web 設計-viewport個像素往往都是對應著電腦螢幕的viewport專題：深入理解css中響應式 Web 設計-viewport個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻並非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的viewport專題：深入理解css中響應式 Web 設計-viewportpx所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在行動裝置上，必須弄清楚這一點。在早先的行動裝置中，螢幕像素密度都比較低，如iphoneviewport專題：深入理解css中響應式 Web 設計-viewport，它的解析度為viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0xviewport專題：深入理解css中響應式 Web 設計-viewport80，在iphoneviewport專題：深入理解css中響應式 Web 設計-viewport上，一個css像素確實是等於一個螢幕物理像素的。後來隨著技術的發展，行動裝置的螢幕像素密度越來越高，從iphoneviewport專題：深入理解css中響應式 Web 設計-viewport開始，蘋果公司便推出了所謂的Retina屏，解析度提高了一倍，變成viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0x9viewport專題：深入理解css中響應式 Web 設計-viewport0，但螢幕尺寸卻沒變化，這意味著在同樣大小的螢幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其他品牌的行動裝置也是這個道理。例如安卓裝置依螢幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓裝置上的一個css像素相當於多少個螢幕實體像素，也因裝置的不同而不同，沒有一個定論。

    還有一個因素也會造成css中px的變化，那就是使用者縮放。例如，當使用者把頁面放大一倍，那麼css中viewport專題：深入理解css中響應式 Web 設計-viewportpx所代表的實體像素也會增加一倍；反之把頁面縮小一倍，css中viewport專題：深入理解css中響應式 Web 設計-viewportpx所代表的實體像素也會減少一倍。關於這點，文章後面的部分還會講到。

    在行動裝置瀏覽器中以及某些桌面瀏覽器中，window物件有一個devicePixelRatio屬性，它的官方的定義為：裝置實體像素和裝置獨立像素的比例，也就是devicePixelRatio = 物理像素/ 獨立像素。 css中的px就可以看做是裝置的獨立像素，所以透過devicePixelRatio，我們可以知道該裝置上一個css像素代表多少個實體像素。例如，在Retina螢幕的iphone上，devicePixelRatio的值為viewport專題：深入理解css中響應式 Web 設計-viewport，也就是說viewport專題：深入理解css中響應式 Web 設計-viewport個css像素相當於viewport專題：深入理解css中響應式 Web 設計-viewport個實體像素。但要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，所以我們現在還並不能完全信賴這個東西，具體的情況可以看下這篇文章。

devicePixelRatio的測試結果：

#三、PPK的關於三個viewport的理論

#    ppk大神對於行動裝置上的viewport有著非常多的研究（第一篇，第二篇，第三篇），有興趣的同學可以去看一下，本文中有很多數據和觀點也是出自那裡。 ppk認為，行動裝置上有三個viewport。

    首先，行動裝置上的瀏覽器認為自己必須能讓所有的網站都正常顯示，即使是那些不是為行動裝置設計的網站。但如果以瀏覽器的視覺區域作為viewport的話，因為行動裝置的螢幕都不是很寬，所以那些為桌面瀏覽器設計的網站放到行動裝置上顯示時，必然會因為行動裝置的viewport太窄，而擠作一團，甚至佈局什麼的都會亂掉。也許有人會問，現在不是有很多手機解析度都非常大嗎，像是viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport8xviewport專題：深入理解css中響應式 Web 設計-viewport0viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport，或是viewport專題：深入理解css中響應式 Web 設計-viewport080xviewport專題：深入理解css中響應式 Web 設計-viewport9viewport專題：深入理解css中響應式 Web 設計-viewport0這樣，那這樣的手機用來顯示為桌面瀏覽器設計的網站是沒問題的吧？前面我們已經說了，css中的viewport專題：深入理解css中響應式 Web 設計-viewportpx並不是代表螢幕上的viewport專題：深入理解css中響應式 Web 設計-viewportpx，你解析度越大，css中viewport專題：深入理解css中響應式 Web 設計-viewportpx代表的物理像素就會越多，devicePixelRatio的值也越大，這很好理解，因為你解析度增大了，但螢幕尺寸並沒有變大多少，必須讓css中的viewport專題：深入理解css中響應式 Web 設計-viewportpx代表更多的物理像素，才能讓viewport專題：深入理解css中響應式 Web 設計-viewportpx的東西在螢幕上的大小與那些低解析度的裝置差不多，不然就會因為太小而看不清。所以在viewport專題：深入理解css中響應式 Web 設計-viewport080xviewport專題：深入理解css中響應式 Web 設計-viewport9viewport專題：深入理解css中響應式 Web 設計-viewport0這樣的裝置上，在預設情況下，也許你只要把一個p的寬度設為viewport專題：深入理解css中響應式 Web 設計-viewport00多px（視devicePixelRatio的值而定），就是滿屏的寬度了。回到正題上來，如果把行動裝置上瀏覽器的可視區域設為viewport的話，某些網站就會因為viewport太窄而顯示錯亂，所以這些瀏覽器就決定默認情況下把viewport設為一個較寬的值，例如980px，這樣的話即使是那些為桌面設計的網站也能在行動瀏覽器上正常顯示了。 ppk把這個瀏覽器預設的viewport叫做 layout viewport。 這個layout viewport的寬度可以透過 document.documentElement.clientWidth 來取得。

    然而，layout viewport 的寬度是大於瀏覽器視覺區域的寬度的，所以我們還需要一個viewport來代表瀏覽器視覺區域的大小，ppk把這個viewport叫做visual viewport。 visual viewport的寬度可以透過window.innerWidth 來獲取，但在Android viewport專題：深入理解css中響應式 Web 設計-viewport, Oprea mini 和 UC 8中無法正確取得。

    現在我們有兩個viewport了：#layout viewport# 和#visual viewport 。但瀏覽器覺得不夠，因為現在越來越多的網站都會為行動裝置進行單獨的設計，所以必須還要有一個能完美適應行動裝置的viewport。所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動條就能正常的查看網站的所有內容；第二，顯示的文字的大小是合適，比如一段viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewportpx大小的文字，不會因為在一個高密度像素的螢幕裡顯示得太小而無法看清，理想的情況是這段viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewportpx的文字無論是在何種密度螢幕，何種解析度下，顯示出來的大小都是差不多的。當然，不只是文字，其他元素像圖片什麼的也是這個道理。 ppk把這個viewport叫做 ideal viewport#，也就是第三個viewport－行動裝置的理想viewport。

    ideal viewport並沒有固定的尺寸，不同的設備有不同的ideal viewport。所有的iphone的ideal viewport寬度都是viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px，無論它的螢幕寬度是viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0還是viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0，也就是說，在iphone中，css中的viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px就代表iphone螢幕的寬度。

#但是安卓設備就比較複雜了，有viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px的，有viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px的，有viewport專題：深入理解css中響應式 Web 設計-viewport8viewport專題：深入理解css中響應式 Web 設計-viewportpx的等等，關於不同的設備ideal viewport的寬度都為多少，可以到http://viewportsizes.com去查看一下，裡面收集了眾多設備的理想寬度。

    總結：ppk把行動裝置上的viewport分成layout viewport  、 visual viewport   # ideal viewport

  三類，其中的ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等於移動設備的屏幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那麼這個元素的寬度就是設備螢幕的寬度了，也就是寬度為viewport專題：深入理解css中響應式 Web 設計-viewport00%的效果。 ideal viewport 的意義在於，無論在何種解析度的螢幕下，那些針對ideal viewport 而設計的網站，不需要用戶手動縮放，也不需要出現橫向滾動條，都可以完美的呈現給用戶。 四、利用meta標籤控制viewport

    行動裝置預設的viewport是layout viewport，也就是比螢幕要寬的viewport，但在進行行動裝置網站的開發時，我們需要的是ideal viewport。那麼要怎麼得到ideal viewport呢？這就該輪到meta標籤出場了。 我們在開發行動裝置的網站時，最常見的一個動作就是把下面這個東西複製到我們的

標籤中：

<meta name="viewport" content="width=device-width, initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport.0, maximum-scale=viewport專題：深入理解css中響應式 Web 設計-viewport.0, user-scalable=0">

該meta標籤的作用是讓目前viewport的寬度等於設備的寬度，同時不允許使用者手動縮放。也許允不允許用戶縮放不同的網站有不同的要求，但讓viewport的寬度等於設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的預設viewport，也就是說會出現橫向捲軸。

這個name為viewport的meta標籤到底有哪些東西呢，又有什麼作用呢？

meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決行動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。

這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。

特别说明的是，当 target-densitydpi=device-dpi 时， css中的viewport專題：深入理解css中響應式 Web 設計-viewportpx会等于物理像素中的viewport專題：深入理解css中響應式 Web 設計-viewportpx。

因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。

五、把当前的viewport宽度设置为 ideal viewport 的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

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

下图是这句代码在各大移动端浏览器上的测试结果：

可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

这样的写法看起来谁都会做，没吃过猪肉，谁还没见过猪跑啊~，确实，我们在开发移动设备上的网页时，不管你明不明白什么是viewport，可能你只需要这么一句代码就够了。

可是你肯定不知道

<meta name="viewport" content="initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport">

这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。

呵呵，傻眼了吧，因为从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是viewport專題：深入理解css中響應式 Web 設計-viewport，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行viewport專題：深入理解css中響應式 Web 設計-viewport00%的缩放，也就是缩放值为viewport專題：深入理解css中響應式 Web 設計-viewport的时候，不就得到了 ideal viewport吗？事实证明，的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport"> 后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果。

测试结果表明 initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport 也能把当前的viewport宽度变成 ideal viewport 的宽度，但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。但这点小瑕疵已经无关紧要了。

但如果width 和 initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport同时出现，并且还出现了冲突呢？比如：

<meta name="viewport" content="width=viewport專題：深入理解css中響應式 Web 設計-viewport00, initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport">

width=viewport專題：深入理解css中響應式 Web 設計-viewport00表示把当前viewport的宽度设为viewport專題：深入理解css中響應式 Web 設計-viewport00px，initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=viewport專題：深入理解css中響應式 Web 設計-viewport00，ideal viewport的宽度为viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0时，取的是viewport專題：深入理解css中響應式 Web 設計-viewport00；当width=viewport專題：深入理解css中響應式 Web 設計-viewport00， ideal viewport的宽度为viewport專題：深入理解css中響應式 Web 設計-viewport80时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport">

六、关于meta viewport的更多知识

viewport專題：深入理解css中響應式 Web 設計-viewport、关于缩放以及initial-scale的默认值

首先我们先来讨论一下缩放的问题，前面已经提到过，缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px，如果我们设置 initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport ，此时viewport的宽度会变为只有viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px了，这也好理解，放大了一倍嘛，就是原来viewport專題：深入理解css中響應式 Web 設計-viewportpx的东西变成viewport專題：深入理解css中響應式 Web 設計-viewportpx了，但是viewport專題：深入理解css中響應式 Web 設計-viewportpx变为viewport專題：深入理解css中響應式 Web 設計-viewportpx并不是把原来的viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px变为viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px了，而是在实际宽度不变的情况下，viewport專題：深入理解css中響應式 Web 設計-viewportpx变得跟原来的viewport專題：深入理解css中響應式 Web 設計-viewportpx的长度一样了，所以放大viewport專題：深入理解css中響應式 Web 設計-viewport倍后原来需要viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px才能填满的宽度现在只需要viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px就做到了。因此，我们可以得出一个公式：

visual viewport宽度 = ideal viewport宽度  / 当前缩放值

当前缩放值 = ideal viewport宽度  / visual viewport宽度

ps: visual viewport的宽度指的是浏览器可视区域的宽度。

大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = viewport專題：深入理解css中響應式 Web 設計-viewport 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是viewport專題：深入理解css中響應式 Web 設計-viewport。

好了，现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是viewport專題：深入理解css中響應式 Web 設計-viewport，因为当 initial-scale = viewport專題：深入理解css中響應式 Web 設計-viewport 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，viewport專題：深入理解css中響應式 Web 設計-viewport0viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是viewport專題：深入理解css中響應式 Web 設計-viewport。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。

根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：

当前缩放值 = viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0 / 980

也就是当前的initial-scale默认值应该是 0.viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。

总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

viewport專題：深入理解css中響應式 Web 設計-viewport、动态改变meta viewport标签

第一种方法

可以使用document.write来动态输出meta viewport标签，例如：

document.write(&#viewport專題：深入理解css中響應式 Web 設計-viewport9;<meta name="viewport" content="width=device-width,initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport">&#viewport專題：深入理解css中響應式 Web 設計-viewport9;)

第二种方法

通过setAttribute来改变

<meta id="testViewport" name="viewport" content="width = viewport專題：深入理解css中響應式 Web 設計-viewport80"><script>var mvp = document.getElementById(&#viewport專題：深入理解css中響應式 Web 設計-viewport9;testViewport&#viewport專題：深入理解css中響應式 Web 設計-viewport9;);
mvp.setAttribute(&#viewport專題：深入理解css中響應式 Web 設計-viewport9;content&#viewport專題：深入理解css中響應式 Web 設計-viewport9;,&#viewport專題：深入理解css中響應式 Web 設計-viewport9;width=viewport專題：深入理解css中響應式 Web 設計-viewport80&#viewport專題：深入理解css中響應式 Web 設計-viewport9;);</script>

安卓viewport專題：深入理解css中響應式 Web 設計-viewport.viewport專題：深入理解css中響應式 Web 設計-viewport自带浏览器上的一个bug

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

测试的手机ideal viewport 宽度为viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px，第一次弹出的值是viewport專題：深入理解css中響應式 Web 設計-viewport00,但这个值应该是第行meta标签的结果啊，然后第二次弹出的值是viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0，这才是第一行meta标签所达到的效果啊，所以在安卓viewport專題：深入理解css中響應式 Web 設計-viewport.viewport專題：深入理解css中響應式 Web 設計-viewport(或许是所有viewport專題：深入理解css中響應式 Web 設計-viewport.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。

七、结语

说了那么多废话，最后还是有必要总结一点有用的出来。

首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，viewport專題：深入理解css中響應式 Web 設計-viewport0viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewportpx等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于viewport專題：深入理解css中響應式 Web 設計-viewport00%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=viewport專題：深入理解css中響應式 Web 設計-viewport">

来得到一个理想的viewport（也就是前面说的ideal viewport）。

为什么需要有理想的viewport呢？比如一个分辨率为viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0xviewport專題：深入理解css中響應式 Web 設計-viewport80的手机理想viewport的宽度是viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px，而另一个屏幕尺寸相同但分辨率为viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0x9viewport專題：深入理解css中響應式 Web 設計-viewport0的手机的理想viewport宽度也是为viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0、viewport專題：深入理解css中響應式 Web 設計-viewportviewport專題：深入理解css中響應式 Web 設計-viewport0、viewport專題：深入理解css中響應式 Web 設計-viewport8viewport專題：深入理解css中響應式 Web 設計-viewport、viewport專題：深入理解css中響應式 Web 設計-viewport00等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

【相关推荐】

viewport專題：深入理解css中響應式 Web 設計-viewport. 特别推荐：“php程序员工具箱”V0.viewport專題：深入理解css中響應式 Web 設計-viewport版本下载

viewport專題：深入理解css中響應式 Web 設計-viewport. 关于viewport兼容性问题的实例代码

viewport專題：深入理解css中響應式 Web 設計-viewport. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例

viewport專題：深入理解css中響應式 Web 設計-viewport. HTMLviewport專題：深入理解css中響應式 Web 設計-viewport中Viewport的参数介绍以及使用方法

以上是viewport專題：深入理解css中響應式 Web 設計-viewport的詳細內容。更多資訊請關注PHP中文網其他相關文章！