关于移动设备的viewport

移动端问题汇总
我刚刚接触移动端的基础知识内容，希望我整理的内容可以给在互联网这条路上奋斗的小伙伴们一些启发，也希望可以有前辈们可以指出我不够严谨或者准确的部分。 ————1 是非成败转身空

一 关于移动设备的viewport

1.1viewport的概念 [ˈvjuːpɔːrt]

关于viewport标准一些的解释：一个展示页面的虚拟窗口（viewport）。那么更容易理解一些的意思就是我们移动设备上用来展示我们网页的那部分区域，但事实上她并不局限于所展示的区域，在默认情况下，viewport的实际大小相比较移动设备的浏览器展示区域或大些或小一些。
对于这种现象，我分两种情况进行说明：
①viewport比移动设备浏览器区域大：产生这种情况是因为移动设备的分辨率要小于桌面电脑的分辨率，为了保证能够完整的展示整个页面内容，移动设备的浏览器会将自己的默认viewport设置为980px或1024px（根据设备自己决定），但是面临着一大一小的情况下，移动设备的浏览器就会出现横向滚动条，来保证内容的完整性（起因就是浏览器可视区域的宽度比默认的viewport的宽度要小）
②viewport的实际大小相比较移动设备一致大小或者小一点：如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。

1.2导致css中px变化的原因

①不是有很多手机分辨率都非常大吗，比如768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？
css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大，这很好理解，因为你分辨率增大了，但屏幕尺寸并没有变大多少，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。所以在1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多px（视devicePixelRatio的值而定），就是满屏的宽度了。

②对于移动设备和桌面电脑像素问题的解释？
像素：即图像元素的基本单位。
分辨率：即屏幕图像的精密度，是指显示屏所能显示的像素的多少。
在介绍之前，我们需要先知道一个名词“物理像素”，我将她理解为代码界的一种基本单位，而不同的设备或者环境中，可能css中的1px表示不同，但是最终都可以通过物理像素的大小来衡量
手机网页浏览器是以逻辑分辨率进行渲染的，而逻辑分辨率=物理分辨率/devicePixelRatio。
屏幕分辨率基于像素，而跨屏设备的屏幕分辨率与物理尺寸无关（是的无关），因此在电子设备上，像素是一个纯电子尺寸而非物理尺寸。也就是说呢，跨屏设备的分辨率像素之间是存在物理差异的。

【window对象有一个devicePixelRatio(设备像素比)属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 dpr = dp/ dips。
dp(device pixels)：设备物理像素；
dips(device-independent pixels)：设备独立像素，dips = css像素/scale（缩放比例），所以dpr=(dp/css像素)*scale9（了解即可，存在兼容问题，不可完全依赖）】。
桌面电脑css的1px就代表1个物理像素；但在移动设备上，（早期设备分辨率比较低的时候320x480也是1px=1物理像素）随着移动设备的像素密度的提高，分辨率也随之变高，导致一个css中的1px所代表的物理像素也增加了（可能增加到2个物理像素甚至更高需要根据具体设备信息而定）。
除此之外，例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

总结：导致css中的px变化的原因有两个，①是因为分辨率变高了；②是因为用户的缩放。

1.3 布局视口 视觉视口 理想视口

layout viewport(布局视口)：默认的大于移动设备浏览器本身宽度的viewport，其宽度可通过 document.documentElement.clientWidth 来获取。
visual viewport(视觉视口)：我们最终所看到的移动设备浏览器可视区域的大小的viewport，可以通过window.innerWidth 来获取。
ideal viewport(理想视口)：能够完美适配移动设备的viewport，可通过window.screen.width获取
（完美适配：①不需要用户缩放和横向滚动条就能正常查看网站所有内容；②显示的文字，图像等其他元素大小合适）

ideal viewport 是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。

总结：
layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。js获取布局视口：
document.documentElement.clientWidth | document.body.clientWidth；
visual viewport(视觉视口)：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。js获取视觉视口：window.innerWidth；
ideal viewport(理想视口)：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。js获取理想视口：window.screen.width；

1、在桌面浏览器上，浏览器窗口与视口的宽度一致，而视口（CSS标准文档中称为“初始包含块”）是CSS百分比宽度推算的根源，因此，浏览器窗口是约束CSS布局的视口；
2、在手机上，有两个视口，布局视口会限制CSS布局；视觉视口决定用户看到的网站内容；
3、移动端浏览器还有个理想视口，它是对特定设备上的特定浏览器的布局视口的一个理想尺寸；
4、可以把布局视口尺寸定义为理想视口。这也是响应式设计的基础。

1.4 利用 meta标签对 viewport进行控制

为什么要使用meta标签？
为了保证在桌面电脑展示的网页和最终手机显示的网页一样。这个设置意思就指让手机浏览器的窗口等于手机屏幕大小。
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

这条代码的意思是 ：让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更高细腻。
（手机浏览器会找你的,如果指定了width，就会把页面放到指定width的viewport里面取，如果没有指定，则默认值有的是980，具体根据浏览器来定的。）

历史介绍：
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，

1.5viewport属性的解释

1、width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位是缩放为100%的CSS的像素）
2、height : 和width相对应，指定高度
3、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例
4、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0
5、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0
6、user-scalable : 用户是否可以手动缩放，值可以是：①1，yes、 true允许用户缩放；②0，no、false不允许用户缩放

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

1.6两种得到ideal viewport的方法

方法一：

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度。

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

方法二：
缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，就得到了 ideal viewport

<meta name="viewport" content="initial-scale=1">

当两者同时存在时，优先级如何？
当遇到这种情况时，浏览器会取它们两个中较大的那个值。

但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。

所以，最完美的写法应该是，两者都写上去

<meta name="viewport" content="width=device-width, initial-scale=1">

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

首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。来得到一个理想的viewport（也就是前面说的ideal viewport）。

为什么需要有理想的viewport呢？
这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。