Viewport special topic: In-depth understanding of responsive web design in css-viewport

When reconstructing or developing web pages on mobile devices, the first thing you have to understand is the viewport on the mobile device. Only by understanding the concept of viewport and figuring out the use of meta tags related to viewport can we do better. Adapt or respond to mobile devices with different resolutions.

Viewport special topic: In-depth understanding of responsive web design in css-viewport. The concept of viewport

In layman’s terms, the viewport on a mobile device is the screen of the device that can be used to display our web page The area, to be specific, is the area on the browser (it may also be the webview in an app) used to display the web page, but the viewport is not limited to the browservisual area Size, which may be larger or smaller than the browser's visible area. By default, generally speaking, the viewport on mobile devices is larger than the browser's visible area. This is because the resolution of mobile devices is smaller than that of desktop computers, so in order to be able to Traditional websites designed for desktop browsers are normally displayed on the device. The browser on the mobile device will set its default viewport to 980px or Viewport special topic: In-depth understanding of responsive web design in css-viewport0Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewportpx (it may also be other values, this is determined by the device itself), but with The consequence is that a horizontal scroll bar will appear in the browser, because the width of the browser's visible area is smaller than the width of the default viewport. The image below lists the default viewport widths of browsers on some devices.

Viewport special topic: In-depth understanding of responsive web design in css-viewport. Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in css is not equal to Viewport special topic: In-depth understanding of responsive web design in css-viewportpx of the device

In css we generally Using px as the unit, one pixel of CSS in desktop browsers often corresponds to one physical pixel of the computer screen. This may cause us the illusion that the pixels in CSS are the physical pixels of the device. But the actual situation is not like this. The pixel in CSS is just an abstract unit. In different devices or different environments, the physical pixels of the device represented by Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in CSS are different. In web pages designed for desktop browsers, we don’t need to worry about this, but on mobile devices, we must understand this. In earlier mobile devices, the screen pixel density was relatively low, such as the iPhone Viewport special topic: In-depth understanding of responsive web design in css-viewport, which had a resolution of Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0xViewport special topic: In-depth understanding of responsive web design in css-viewport80. On the iPhone Viewport special topic: In-depth understanding of responsive web design in css-viewport, one CSS pixel was indeed equal to one physical pixel on the screen. Later, with the development of technology, the screen pixel density of mobile devices became higher and higher. Starting from iPhone Viewport special topic: In-depth understanding of responsive web design in css-viewport, Apple launched the so-called Retina screen, which doubled the resolution to Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0x9Viewport special topic: In-depth understanding of responsive web design in css-viewport0, but the screen size did not change. This means that on a screen of the same size, there are twice as many pixels. At this time, one CSS pixel is equal to two physical pixels. The same is true for other brands of mobile devices. For example, Android devices can be divided into different levels according to the screen pixel density, such as ldpi, mdpi, hdpi, xhdpi, etc., and the resolutions are also varied. One CSS pixel on an Android device is equivalent to how many physical pixels on the screen it is, which also varies from device to device. There is no conclusion.

There is another factor that can also cause changes in px in css, and that is user scaling. For example, when the user doubles the page size, the physical pixels represented by Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in CSS will also double; conversely, when the page is doubled, the physical pixels represented by Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in CSS will also be doubled. This point will be discussed later in the article.

In mobile browsers and some desktop browsers, the window object has a devicePixelRatio attribute. Its official definition is: the ratio of the physical pixels of the device to the independent pixels of the device. That is, devicePixelRatio = physical pixel/independent pixel. px in css can be regarded as an independent pixel of the device, so through devicePixelRatio, we can know how many physical pixels a css pixel on the device represents. For example, on an iPhone with a Retina screen, the value of devicePixelRatio is Viewport special topic: In-depth understanding of responsive web design in css-viewport, which means that Viewport special topic: In-depth understanding of responsive web design in css-viewport CSS pixel is equivalent to Viewport special topic: In-depth understanding of responsive web design in css-viewport physical pixels. However, it should be noted that devicePixelRatio still has some compatibility issues in different browsers, so we cannot completely trust this thing now. For specific situations, please read this article.

Test results of devicePixelRatio:

##Viewport special topic: In-depth understanding of responsive web design in css-viewport. PPK’s theory about three viewports

The ppk master has done a lot of research on viewports on mobile devices (the first article, the second article, the third article). Interested students can take a look. Many data and opinions in this article also come from there. . ppk believes that there are three viewports on mobile devices.

First, browsers on mobile devices believe that they must enable all websites to display properly, even those that are not designed for mobile devices. But if the visible area of ​​the browser is used as the viewport, because the screens of mobile devices are not very wide, when websites designed for desktop browsers are displayed on mobile devices, the viewport of the mobile device will inevitably be too narrow. And if you are crowded together, even the layout will be messed up. Some people may ask, aren't there many mobile phones with very large resolutions now, such as Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport8xViewport special topic: In-depth understanding of responsive web design in css-viewport0Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport, or Viewport special topic: In-depth understanding of responsive web design in css-viewport080xViewport special topic: In-depth understanding of responsive web design in css-viewport9Viewport special topic: In-depth understanding of responsive web design in css-viewport0? Is it okay for such mobile phones to display websites designed for desktop browsers? As we have said before, Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in CSS does not represent Viewport special topic: In-depth understanding of responsive web design in css-viewportpx on the screen. The larger your resolution, the more physical pixels represented by Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in CSS, and the larger the value of devicePixelRatio. This is easy to understand, because you The resolution has increased, but the screen size has not increased much. Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in CSS must represent more physical pixels, so that the size of Viewport special topic: In-depth understanding of responsive web design in css-viewportpx things on the screen is similar to that of low-resolution devices, otherwise it will Too small to see clearly. So on a device like Viewport special topic: In-depth understanding of responsive web design in css-viewport080xViewport special topic: In-depth understanding of responsive web design in css-viewport9Viewport special topic: In-depth understanding of responsive web design in css-viewport0, by default, maybe you only need to set the width of a p to more than Viewport special topic: In-depth understanding of responsive web design in css-viewport00 px (depending on the value of devicePixelRatio), which is the full screen width. Back to the topic, if you set the viewport of the browser on a mobile device to a viewport, some websites will display cluttered because the viewport is too narrow, so these browsers decide to set the viewport to a wider one by default. value, such as 980px, so that even websites designed for desktops can be displayed normally on mobile browsers. ppk calls the default viewport of this browser layout viewport. The width of this layout viewport can be obtained through document.documentElement.clientWidth.

However, the width of layout viewport is greater than the width of the browser's visible area, so we also need a viewport to represent the size of the browser's visible area , ppk calls this viewport visual viewport. The width of the visual viewport can be obtained through window.innerWidth , but it cannot be obtained correctly in Android Viewport special topic: In-depth understanding of responsive web design in css-viewport, Oprea mini and UC 8.

             

    Now we have two viewports: layout viewport and visual viewport . But the browser feels that it is not enough, because more and more websites are now designed separately for mobile devices, so there must be a viewport that can perfectly adapt to mobile devices. The so-called perfect adaptation means that firstly, users can view all the content of the website normally without the need for zooming and horizontal scrolling; secondly, the size of the displayed text is appropriate, for example, a piece of text of Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewportpx will not be displayed due to the size of the text. The display on a high-density pixel screen is too small to be seen clearly. The ideal situation is that the size of this Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewportpx text will be similar no matter what density screen and what resolution it is displayed on. Of course, this is true not only for text, but also for other elements such as pictures and so on. ppk calls this viewport ideal viewport, which is the third viewport - the ideal viewport for mobile devices.

The ideal viewport does not have a fixed size. Different devices have different ideal viewports. The ideal viewport width of all iPhones is Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0px, regardless of whether its screen width is Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0 or Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0. That is to say, in iPhone, Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0px in CSS represents the width of the iPhone screen.

## But Android devices are more complicated, with Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0px, Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0px, Viewport special topic: In-depth understanding of responsive web design in css-viewport8Viewport special topic: In-depth understanding of responsive web design in css-viewportpx, etc. How much? You can check it out at http://viewportsizes.com, which collects the ideal widths for many devices. ###

To summarize: ppk divides the viewport on mobile devices into layout viewport, visual viewport and ideal viewport Three categories, among which the ideal viewport is the most suitable viewport for mobile devices. The width of the ideal viewport is equal to the screen width of the mobile device. As long as the width of a certain element is set to ideal viewport in CSS width (unit is px), then the width of this element is the width of the device screen, which is the effect of a width of Viewport special topic: In-depth understanding of responsive web design in css-viewport00%. The significance of ideal viewport is that no matter what screen resolution is used, websites designed for ideal viewport can be perfectly presented to users without requiring users to manually zoom or horizontal scroll bars.

Viewport special topic: In-depth understanding of responsive web design in css-viewport. Use meta tags to control the viewport

The default viewport for mobile devices is the layout viewport, which is the one wider than the screen viewport, but when developing websites for mobile devices, what we need is ideal viewport. So how can I get the ideal viewport? It's the meta tag's turn to appear.

When we develop a website for mobile devices, one of the most common actions is to copy the following thing into our head tag:

<meta name="viewport" content="width=device-width, initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport.0, maximum-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport.0, user-scalable=0">

The meta tag Its function is to make the width of the current viewport equal to the width of the device, while not allowing the user to manually zoom. Maybe different websites have different requirements for allowing users to zoom, but making the width of the viewport equal to the width of the device should be the effect everyone wants. If you don't set it like this, then the screen ratio will be used. The default viewport is wide, which means a horizontal scroll bar will appear.

What exactly does this meta tag named viewport contain, and what is its function?

meta viewport tag was first introduced by Apple in its Safari browser to solve the viewport problem of mobile devices. Later, Android and major browser manufacturers also followed suit and introduced support for meta viewport. Facts have also proved that this thing is still very useful.

In Apple’s specifications, the meta viewport has Viewport special topic: In-depth understanding of responsive web design in css-viewport attributes (let’s call those things in the content attributes and values), as follows:

width	Set the width of layout viewport to a positive integer, or the string "width-device"
initial-scale	Set the initial scaling value of the page, which is a number that can contain decimals
minimum-scale	The minimum allowed to the user The scaling value, which is a number, can contain decimals
maximum-scale	The maximum scaling value allowed to the user, which is a number, can contain decimals
height	Set the height of layout viewport. This property is not important to us and is rarely used
user-scalable	Whether the user is allowed to zoom, the value is "no" or "yes", no means not allowed, yes means allowed

These attributes can be used at the same time, alone or mixed. When multiple attributes are used at the same time, just separate them with commas.

In addition, Android also supports the private attribute target-densitydpi, which represents the density level of the target device and is used to determine how many physical pixels Viewport special topic: In-depth understanding of responsive web design in css-viewportpx in CSS represents.

target-densitydpi

The value can be a numerical value or one of the strings high-dpi, medium-dpi, low-dpi, device-dpi

特别说明的是，当 target-densitydpi=device-dpi 时， css中的Viewport special topic: In-depth understanding of responsive web design in css-viewportpx会等于物理像素中的Viewport special topic: In-depth understanding of responsive web design in css-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 special topic: In-depth understanding of responsive web design in css-viewport">

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

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

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是Viewport special topic: In-depth understanding of responsive web design in css-viewport，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行Viewport special topic: In-depth understanding of responsive web design in css-viewport00%的缩放，也就是缩放值为Viewport special topic: In-depth understanding of responsive web design in css-viewport的时候，不就得到了 ideal viewport吗？事实证明，的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport"> 后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果。

测试结果表明 initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport 也能把当前的viewport宽度变成 ideal viewport 的宽度，但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。但这点小瑕疵已经无关紧要了。

但如果width 和 initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport同时出现，并且还出现了冲突呢？比如：

<meta name="viewport" content="width=Viewport special topic: In-depth understanding of responsive web design in css-viewport00, initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport">

width=Viewport special topic: In-depth understanding of responsive web design in css-viewport00表示把当前viewport的宽度设为Viewport special topic: In-depth understanding of responsive web design in css-viewport00px，initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=Viewport special topic: In-depth understanding of responsive web design in css-viewport00，ideal viewport的宽度为Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0时，取的是Viewport special topic: In-depth understanding of responsive web design in css-viewport00；当width=Viewport special topic: In-depth understanding of responsive web design in css-viewport00， ideal viewport的宽度为Viewport special topic: In-depth understanding of responsive web design in css-viewport80时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport">

六、关于meta viewport的更多知识

Viewport special topic: In-depth understanding of responsive web design in css-viewport、关于缩放以及initial-scale的默认值

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

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

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

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

    大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = Viewport special topic: In-depth understanding of responsive web design in css-viewport 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是Viewport special topic: In-depth understanding of responsive web design in css-viewport。

    好了，现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是Viewport special topic: In-depth understanding of responsive web design in css-viewport，因为当 initial-scale = Viewport special topic: In-depth understanding of responsive web design in css-viewport 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，Viewport special topic: In-depth understanding of responsive web design in css-viewport0Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是Viewport special topic: In-depth understanding of responsive web design in css-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 special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0 / 980

也就是当前的initial-scale默认值应该是 0.Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。

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

        

Viewport special topic: In-depth understanding of responsive web design in css-viewport、动态改变meta viewport标签

第一种方法

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

document.write(&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;<meta name="viewport" content="width=device-width,initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport">&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;)

第二种方法

通过setAttribute来改变 

<meta id="testViewport" name="viewport" content="width = Viewport special topic: In-depth understanding of responsive web design in css-viewport80"><script>var mvp = document.getElementById(&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;testViewport&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;);
mvp.setAttribute(&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;content&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;,&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;width=Viewport special topic: In-depth understanding of responsive web design in css-viewport80&#Viewport special topic: In-depth understanding of responsive web design in css-viewport9;);</script>

安卓Viewport special topic: In-depth understanding of responsive web design in css-viewport.Viewport special topic: In-depth understanding of responsive web design in css-viewport自带浏览器上的一个bug

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

测试的手机ideal viewport 宽度为Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0px，第一次弹出的值是Viewport special topic: In-depth understanding of responsive web design in css-viewport00,但这个值应该是第行meta标签的结果啊，然后第二次弹出的值是Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0，这才是第一行meta标签所达到的效果啊，所以在安卓Viewport special topic: In-depth understanding of responsive web design in css-viewport.Viewport special topic: In-depth understanding of responsive web design in css-viewport(或许是所有Viewport special topic: In-depth understanding of responsive web design in css-viewport.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。

七、结语

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

首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，Viewport special topic: In-depth understanding of responsive web design in css-viewport0Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewportpx等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于Viewport special topic: In-depth understanding of responsive web design in css-viewport00%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=Viewport special topic: In-depth understanding of responsive web design in css-viewport">

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

为什么需要有理想的viewport呢？比如一个分辨率为Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0xViewport special topic: In-depth understanding of responsive web design in css-viewport80的手机理想viewport的宽度是Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0px，而另一个屏幕尺寸相同但分辨率为Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0x9Viewport special topic: In-depth understanding of responsive web design in css-viewport0的手机的理想viewport宽度也是为Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0、Viewport special topic: In-depth understanding of responsive web design in css-viewportViewport special topic: In-depth understanding of responsive web design in css-viewport0、Viewport special topic: In-depth understanding of responsive web design in css-viewport8Viewport special topic: In-depth understanding of responsive web design in css-viewport、Viewport special topic: In-depth understanding of responsive web design in css-viewport00等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

【相关推荐】

Viewport special topic: In-depth understanding of responsive web design in css-viewport. 特别推荐：“php程序员工具箱”V0.Viewport special topic: In-depth understanding of responsive web design in css-viewport版本下载

Viewport special topic: In-depth understanding of responsive web design in css-viewport. 关于viewport兼容性问题的实例代码

Viewport special topic: In-depth understanding of responsive web design in css-viewport. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例

Viewport special topic: In-depth understanding of responsive web design in css-viewport. HTMLViewport special topic: In-depth understanding of responsive web design in css-viewport中Viewport的参数介绍以及使用方法

The above is the detailed content of Viewport special topic: In-depth understanding of responsive web design in css-viewport. For more information, please follow other related articles on the PHP Chinese website!