移动端适配知识点梳理-part one

1. 设备像素和css像素

• 设备像素，又叫物理像素（physical pixel），给出您正在使用的任何设备的形式分辨率，可通过screen.width/height获取.

• css像素，又叫设备独立像素（device-indenpendent pixel），此为逻辑像素，计算机设备中的一个点

• 注意：设备像素和css像素的关系（缩小还是放大针对的是css像素）：

  • 100％缩放：设备像素和css像素重叠

  • 缩小：CSS像素开始缩小，意味着一个设备像素现在与几个CSS像素重叠。

  • 放大：CSS像素开始增长，意味着一个CSS像素与几个设备像素重叠。

2. pc端的尺寸

	屏幕尺寸	窗口尺寸	滚动偏移	视口(布局视口)	html元素	事件坐标
概念	指显示器的屏幕尺寸，和显示器有关，和浏览器无关	浏览器窗口的尺寸，包含滚动条	页面的滚动偏移量	网站的最上方包含的块，用来约束元素（不包含滚动条）		发生鼠标事件时，将公开不少于五个属性对，以提供有关事件确切位置的信息
获取方式	screen.width/height	window.innerWidth/height	window.pageX/YOffset	document.documentElement.clientWidth	document.documentElement.offsetWidth
像素单位	设备像素	css像素	css像素	css像素	css像素
其他说明		窗口的内部宽度以CSS像素为单位，计算时需要知道将多少css像素包含在浏览器窗口中。因此，如果用户放大，则窗口中的可用空间会减少		视口不受CSS影响。它只是在桌面上具有浏览器窗口的宽度和高度。在移动设备上，它要复杂得多。		1. pageX/Y给出相对于html的坐标（css像素） 2. clientX/Y给出相对于视口的坐标（css像素） 3. screenX/Y给出相对于屏幕的坐标（设备像素）

3. 移动设备中的尺寸

	屏幕尺寸	视觉视口	布局视口	滚动偏移	html元素	事件坐标
概念	移动设备的屏幕尺寸	在屏幕上显示的页面的一部分。用户可以滚动以更改其看到的页面部分，或缩放以更改可视视口的大小。	css布局所依赖的视口，比视觉视口要宽，并且不同浏览器的布局视口不同。	视觉视口相对于布局视口的位置		同web端
获取方式	screen.width/height	document.documentElement.clientWidth	window.innerWidth/Height	window.pageX/YOffset	document.documentElement.offsetWidth/Height
像素单位	设备像素	css像素	css像素	css像素	css像素
其他说明		当用户放大或缩小时，视觉视口的尺寸会发生变化，因为屏幕上会容纳更多或更少的CSS像素				1. pageX/Y给出相对于html的坐标 2.clientX/Y相对于可视视口 3.screenX/Y是相对于屏幕

• 视觉视口
  

• 布局视口
  

4. 理想视口

4.1 meta标签

meta标签包含有关浏览器和视口缩放的指令，我们可以通过它来设置布局视口的宽度。

写法如下：

<meta name =“ viewport” content =“名称=值，名称=值”>

其中：

• width：设置布局视口的宽度，值可以为一个正整数或’device-width’

• initial-scale：设置页面的初始缩放比例和布局视口的宽度。

• minimum-scale：设置最小缩放级别

• maximum-scale：设置最大缩放级别

• user-scalable：是否允许用户缩放

4.2 理想视口的概念

在移动端，布局视口往往比视觉视口大很多，给用户不好的体验。所以苹果引入了理想视口的概念。

为浏览器定义的可完美适配移动端的理想viewport,即将布局视口的宽度设置为移动设备的屏幕宽度。

1. 所谓完美适配需要满足以下两点：

• 不需要用户缩放和横向滚动条就能正常的查看网站的所有内容。

• 显示的文字的大小在任何分辨率的屏幕下都是合适的

2. 设置方式：

• width=device-width（device-width本身就是设备的屏幕宽度）

• 缺点：在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

• initial-scale=1：该值是相对于理想视口来缩放的，值为1表明理想视口的缩放比例是100%，即就是理想视口的本身宽度。

• 缺点：IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。

• 同时设置以上两个属性：分别规避了各自的缺点

4.2.1 详解initial-scale

1. 设置此属性实际上发生了两件事儿：

• 它将页面的初始缩放系数设置为相对于理想视口计算得出的定义值。因此，它会生成可视的视口宽度。

• 它将布局视口宽度设置为刚计算出的可视视口宽度。

2. 视觉视口和理想视口的关系如下：

• 可视视口宽度=理想视口宽度/缩放系数

• 缩放系数=理想视口宽度/可视视口宽度
  (注意：当缩放系数变大时，那么css像素会变大，导致视觉视口容纳更少的css像素，于是视觉视口变小)

4.2.2指令冲突

当同时设置width=device-width和initial-scale时，就会产生冲突，因为二者同时对布局视口的宽度进行设置。

例如，进行如下设置时：

<meta name =“ viewport” content =“ initial-scale = 1，width = 400”>

• initial-scale=1 告诉它将布局视口宽度设置为纵向320px和横向480px。

• width=400 告诉它在纵向和横向中都将布局视口宽度设置为400px。

结论：浏览器通过遵循纵向或横向的最大宽度来解决该问题。在我们的示例中，纵向布局视口的宽度变为400px（较大的为320和400），而横向布局视口的宽度为480px（较大的为480和400）。

更多信息：github 、segmentfault

参考如下：

viewport的深入理解

ppk关于视口的介绍