移动端如果没有meta标签的viewport-CSDN博客

1、场景如下

1.1 注释掉 mata name=viewport

<!DOCTYPE html><html lang="en">
<head>    
<meta charset="UTF-8">    
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->    
<meta http-equiv="X-UA-Compatible" content="ie=edge">   
 <title>Document</title></head><body>    
</body></html>
复制代码

// 结果如下图 document.documentElement.clientWidth 是980px
// screen.width 是 375px复制代码

1.1 加上 mata name=viewport 属性如下

<!DOCTYPE html><html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
 <meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>Document</title></head><body>    
</body>
</html>复制代码

// 结果如下图 document.documentElement.clientWidth 是375px
// screen.width 是 375px复制代码

2、为什么会这样

1、明白screen.width和document.documentElement.clientWidth分别表示什么意思
2、screen.width，实际上是叫idealviewport，
3、document.documentElement.clientWidth 实际上是叫layoutviewport复制代码

在移动端有三种类型的 viewport: layoutviewport、visualviewport、idealviewport。具体解释如下：

layoutviewport: 大于实际屏幕，元素的宽度继承于 layoutviewport，用于保证网站的外观特性与桌面浏览器一样。layoutviewport 到底多宽，每个浏览器不同。iPhone 的 safari 为 980px，通过 document.documentElement.clientWidth 获取。
visualviewport: 当前显示在屏幕上的页面，即浏览器可视区域的宽度。
idealviewport: 为浏览器定义的可完美适配移动端的理想 viewport，固定不变，可以认为是设备视口宽度。比如 iphone 7 为 375px, iphone 7p 为 414px。

3、理解meta标签里viewport的属性

1、width=device-width
这里的width，指的是layoutviewport
这里的device-width,指的是idealviewport
2、visualviewport 对应浏览器的属性是doucument.innerWidth和innerHeight复制代码

3.1、 PPK的关于三个viewport的理论

ppk大神对于移动设备上的viewport有着非常多的研究（第一篇，第二篇，第三篇），有兴趣的同学可以去看一下，本文中有很多数据和观点也是出自那里。ppk认为，移动设备上有三个viewport。

首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。也许有人会问，现在不是有很多手机分辨率都非常大吗，比如768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？前面我们已经说了，css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大，这很好理解，因为你分辨率增大了，但屏幕尺寸并没有变大多少，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。所以在1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多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 2, Oprea mini 和 UC 8中无法正确获取。

现在我们已经有两个viewport了：layout viewport和visual viewport。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做

ideal viewport，也就是第三个viewport——移动设备的理想viewport。ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。

但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备ideal viewport的宽度都为多少，可以到viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。