移动端适配知识点整理-篇一

1.Devicepixel和csspixel设备像素，也叫物理像素（physicalpixel），给出你正在使用的任何设备的形式分辨率，可以通过screen.width/height获取.css像素，也叫device-independentpixel(device-independentpixel)，是逻辑像素，计算机设备中的一个点注：devicepixels和csspixels的关系（zoomingorzoominginisforcsspixels）：100%zoom:devicepixels和csspixelsoverlap收缩：CSS像素开始收缩，这意味着一个设备像素现在与多个CSS像素重叠。放大：CSS像素开始增长，这意味着一个CSS像素与多个设备像素重叠。2.PC端屏幕大小窗口大小滚动偏移视口（布局视口）html元素事件坐标概念是指显示器的屏幕尺寸，与显示器有关，与浏览器无关。浏览器窗口的大小包括滚动条页面的滚动Offset网站最顶部包含的块，用于约束元素（无滚动条）当鼠标事件发生时，至少暴露五个属性对以提供信息关于事件的确切位置如何获取screen.width/heightwindow.innerWidth/heightwindow.pageX/YOffsetdocument.documentElement.clientWidthdocument.documentElement.offsetWidthpixelunitdevicepixelcsspixelcsspixelcsspixelcsspixelcsspixels包含在浏览器窗口。因此，如果用户放大，窗口中的可用空间会减少，视口不受CSS影响。它只有桌面上浏览器窗口的宽度和高度。在手机上，情况要复杂得多。1.pageX/Y给出相对于html的坐标（css像素）2.clientX/Y给出相对于视口的坐标（css像素）3.screenX/Y给出相对于屏幕的坐标（设备像素）3.移动设备中的尺寸屏幕尺寸视觉视口布局视口滚动偏移量HTML元素事件坐标概念移动屏幕尺寸屏幕上显示的部分页面。用户可以滚动以更改他们看到的页面部分，或缩放以更改可视视口的大小。css布局依赖的viewport比visualviewport要宽，不同的浏览器有不同的layoutviewport。视觉视口相对于布局视口的位置和web端的获取方式一样pixelcsspixelcsspixelcsspixel其他说明当用户放大或缩小时，视觉视口的尺寸随着或多或少的CSS像素适合屏幕而变化1.pageX/Y给出相对于html的坐标2.clientX/Y相对toVisualviewport3.screenX/Y是相对于屏幕视觉视口的layoutviewport4.Idealviewport4.1meta标签meta标签包含了关于浏览器和视口缩放的说明，通过它我们可以设置布局视口的宽度。写法如下：其中：width：设置布局视口的宽度，值可以是正整数或'device-width'initial-scale:设置页面的初始缩放比例和布局视口的宽度。minimum-scale：设置最小缩放级别maximum-scale：设置最大缩放级别user-scalable：是否允许用户缩放4.2理想视口的概念在移动端，布局视口往往比视觉视口大很多，这不利于用户体验。所以苹果引入了理想视口的概念。为浏览器定义一个能完美适配移动端的理想视口，即布局视口的宽度设置为移动设备的屏幕宽度。所谓完美适配需要满足以下两点：用户无需缩放和水平滚动即可正常查看网站所有内容。显示文字的大小适合任何屏幕分辨率：width=device-width（device-width本身就是设备的屏幕宽度）缺点：在iphone和ipad上，不管是竖屏还是横屏，width是屏幕垂直时理想视口的宽度。initial-scale=1：这个值是相对于理想视口缩放的。值为1表示理想视口的缩放比例为100%，也就是理想视口本身的宽度。缺点：无论是竖屏还是横屏，IE都将宽度设置为竖屏中理想视口的宽度。同时设置以上两个属性：避免各自的缺点4.2.1initial-scale详解1．设置这个属性实际上做了两件事：它设置了要计算的页面的初始缩放系数，相对于理想视口定义的值。因此，它生成可见视口宽度。它将布局视口宽度设置为其刚刚计算的视觉视口宽度。2、视觉视口与理想视口的关系如下：视觉视口宽度=理想视口宽度/缩放因子缩放因子=理想视口宽度/视觉视口宽度（注意：当缩放因子变大时，则css像素会变大，导致视觉视口容纳的css像素变少，所以视觉视口变小）4.2.2指令冲突当width=device-width和initial-scale同时设置时，会发生冲突，因为两个或同时设置布局视口的宽度。例如，当这样设置时：initial-scale=1告诉它将布局视口宽度设置为纵向320像素和横向480像素.width=400告诉它将纵向和横向的布局视口宽度设置为400px。结论：浏览器通过尊重纵向或横向的最大宽度来解决问题。在我们的示例中，纵向布局视口的宽度变为400px（较大的为320和400），而横向布局视口的宽度变为480px（较大的为480和400）。更多信息：github参考如下：深入理解viewportppk对viewport的介绍