(转)移动端开发总结（一）视口viewport总结

转载链接：移动端开发中，关于适配问题的一点总结(一)

• 视口
• 布局视口layout viewport
• 视觉视口visual viewport
• 理想视口
• 缩放
  • 一个重大区别
  • 最小缩放 和最大缩放
• 分辨率
• 物理分辨率dpi
• 设备像素比 dpr
• dipsdevice-independent pixels
  • 例子
• meta视口
• 完美的meta 视口

视口

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

我们一直在使用这行代码，但是这样写有什么用 ？ 加了这个和不加这个到底有什么区别？

要解释这个问题，我们首先要了解一个概念 - 视口

在解释视口之前，我们先回顾一下CSS的基础：

css中，在没有声明任何宽度时，每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢？ 对了，是它父元素的100% 。 每一个css百分比都是根据它的父元素的宽度来进行计算的，所以宽度为父元素 宽度的100% ，本质是：

body,html{
//没有制定宽度，默认100%}
div.aside{
width:20%;}

这里，div.aside占用了它的父元素 body 宽度的100％，但我们没有给body 定义宽度，因此，它占用了它的父元素，也就是html 宽度的100% 。但，我们同样也没有给它定义宽度。因此，它占用的是它的父元素宽度的100% ;

那html 的父元素是谁呢 ？

这就是要说的 视口了。

在CSS文档中，它叫做 初始包含块。

这是百分比计算的根源，它给css布局限制了最大宽度。

在pc 浏览器中，视口的宽度 和浏览器窗口的宽度是一致的（先不管margin 和padding）,html ,body 元素的宽度都和浏览器窗口的宽度一致。

布局视口layout viewport

小屏幕的移动端设备，主要是手机和部分平板（屏幕特别巨大的除外＝ ＝ ），如果让视口的宽度和浏览器宽度 保持一致的话，会导致一个结果——-页面很丑。

手机，平板，浏览器的宽度一般在240-640像素之间，而大…大多数给pc设计的宽度至少为800，一般是960，或者1080。因此，如果用手机去看刚才的那个页面，宽度20%的aside将会非常窄。

一个为桌面设计的网站 在780～ 1260px 的视口中应该会显示的很好，20% 宽度的元素也会大致像设计师希望的那样。

但是，如果移动端浏览器遇到了没有为移动端做优化的网站，它会尽可能的缩小网站让用户看到网站的全貌。所以就显得很挤，字体很小，阅读性很差。

这样用户就只有通过放大，去看想看的信息。

在手机上，视口与移动端浏览器屏幕宽度不再关联，而是完全独立的了。

这个视口，叫布局视口，css布局会根据它来计算，并被它约束。

视觉视口visual viewport

字面意思，它是用户正在看到的网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

一般情况下，视觉视口对于开发人员来说并不是那么重要，到那时如果有需要看到用户正在看什么区域的需求，可以用js来获取。

理想视口

首先来解释一下这个概念

默认情况下，移动设备的布局宽度为768～1024像素，虽然这能让桌面网站不被压扁，但这并不是理想情况，尤其是对于小屏幕的使用者，因为在狭小的屏幕上，更适合狭小的网站。

简单的说，就是，布局视口的默认宽度并不是一个理想的宽度。

这就是 苹果 和其他效仿苹果的 浏览器厂商 引进理想视口的原因。

理想视口，对设备来讲，是最理想的视口尺寸。

显示在理想视口中的网站拥有最理想的宽度，不需要缩放。

但，只有当网站是手机（或者平板）的时候，才应该使用理想视口。

所以，代码<meta name="viewport" content="width=device-width"/>就是告诉浏览器，我要使用理想视口了。

让布局视口的宽度和理想视口的宽度一样。

哦，对了，只有我们人为添加这段代码，理想视口才会生效，否则，布局视口将会维持默认宽度。

缩放

首先，什么是缩放…

从技术上讲，缩放就是放大或者缩小css像素的过程。

典型的例子就是我在手机上浏览pc端的网站，放大一点，好看清字。

但是，这个缩放会影响页面上的所有元素。

比如，宽度为200px的元素占用了200个css像素，由于这些像素被放大了，这些像素就跨越了更多的物理像素，缩小则相反。css像素的尺寸缩小了，跨越的设备像素也就少了。

所以，缩放会影响视觉视口的尺寸。

放大会使视觉视口变得更小，我们看到的内容就越少，因为屏幕上显示的css像素更少了。

缩小则会使视觉视口变的更大，使我们看到更多的部分。因为屏幕上css像素更多了。

所以，缩放程度和视觉视口的大小是逆相关的：缩放程度越大，视觉视口越小。

一个重大区别

在手机上，布局视口不会被缩放。但是在pc上会，因为它的布局视口和视觉视口大小是一样的，不可能改变一个的同时，另一个不会变。

要注意的是：移动端的缩放虽然不会导致css布局被重新计算，但是频繁的操作会给cpu比较大的负担，耗电快，因此不重新布局对性能有很大好处。

最小缩放 和最大缩放

initial-scale=1,maximum-scale=1”

如果允许缩放，那用户可以缩放到什么程度呢 ？

在手机上是5个因子， 换句话说就是20% － 500%。

但是安卓-webkit-不大一样,不管有没有meta指令，它的缩放范围都是4个因子（25%－400%）;

我们可以通过:<meta name="viewport" content="user-scable=no"/>来禁止用户缩放。

分辨率

分辨率有两个含义。

1. 设备每英寸的点的个数。
2. CSS 和 JavaScript 中也有分辨率的概念，不过他们并不是一回事。

物理分辨率dpi

所有的屏幕都有物理分辨率，衡量单位为DPI ,（dots per inch）.DPI 越大，画面越清晰。

另外要注意的一点，web开发者不可能知道物理分辨率，因为没法获取这个信息。有些手机通过screen.width暴露设备像素个数，但这在不同浏览器之间是不可靠的。无论如何JavaScript 都无法获取设备的物理尺寸。

设备像素比 dpr

JavaScript 中，有个属性，window.devicePixelRatio 
CSS也有device-pixel-ratio 和分辨率的媒体查询，但是它们都是和物理分辨率无关的。

取而代之的是，他们提供了设备像素个数和理想视口的比，成为设备像素比，device pixel ratio,简称DPR。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / dips。

dips:device-independent pixels

设备独立像素，就是独立于设备之外的像素，也就是css像素。

例子

5s的物理像素为640px, CSS像素为320px,那 pdr = 640/320 = 2.

DPR不一定是整数,比如BlackBerry Z10 的宽度是768px 物理像素；CSS像素为342px,因此，它的dpr 大约为 2.25.

meta视口

meta 视口标签存在的目的主要是：让布局视口的尺寸和理想视口的尺寸匹配。

Apple 发明了这个标签，其他的厂商复制了它的大部分内容。

meta 标签应该被放在中，并按以下格式书写：

<meta name="viewport" content = "name= value,name = value">

每一个名/值 都是一个给浏览器的指令，以逗号分隔，常用的有5个：

1. width设置布局视口的宽度，为一个正整数
2. initial-scale设置页面的初始缩放程度 和布局视口的宽
3. minimum-scale允许用户的最小缩放程度，为一个数字，可以带小数
4. maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
5. user-scalable是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

完美的meta 视口

在safari中，当设置initial-scale= 1 时，理想视口的尺寸会随着屏幕的旋转改变。在竖屏时，布局视口的宽度是320px ,横屏下，是480px 或者568px.

但在ie10中却有完全相反的问题：

initial-scale = 1 时，在横屏模式下宽度也保持为320px ,但width = device-width 时，它会从320px变为480px.

所以为了在所有浏览器上解决类似的问题，我们需要如下写法：

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