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

时间 2020-09-10

标签移动适配知识梳理栏目无线繁體版

原文原文链接

1. 设备像素和css像素

设备像素，又叫物理像素（physical pixel），给出您正在使用的任何设备的形式分辨率，可经过screen.width/height获取.
css像素，又叫设备独立像素（device-indenpendent pixel），此为逻辑像素，计算机设备中的一个点
注意：设备像素和css像素的关系（缩小仍是放大针对的是css像素）：javascript
- 100％缩放：设备像素和css像素重叠
- 缩小：CSS像素开始缩小，意味着一个设备像素如今与几个CSS像素重叠。
- 放大：CSS像素开始增加，意味着一个CSS像素与几个设备像素重叠。

	屏幕尺寸	窗口尺寸	滚动偏移	视口(布局视口)	html元素	事件坐标
概念	指显示器的屏幕尺寸，和显示器有关，和浏览器无关	浏览器窗口的尺寸，包含滚动条	页面的滚动偏移量	网站的最上方包含的块，用来约束<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给出相对于屏幕的坐标（设备像素）

	屏幕尺寸	视觉视口	布局视口	滚动偏移	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是相对于屏幕

meta标签包含有关浏览器和视口缩放的指令，咱们能够经过它来设置布局视口的宽度。css

写法以下：html

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

其中：java

在移动端，布局视口每每比视觉视口大不少，给用户很差的体验。因此苹果引入了理想视口的概念。git

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

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

2. 视觉视口和理想视口的关系以下：浏览器

(注意：当缩放系数变大时，那么css像素会变大，致使视觉视口容纳更少的css像素，因而视觉视口变小)iphone

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

例如，进行以下设置时：

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

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

更多信息：github

参考以下：

viewport的深刻理解