移动web开发中屏幕适配问题

Posted 2020-09-22

1、首先屏幕的尺寸就是屏幕对角线的长度 尺寸是固定的 2、开发中遇到的单位 相对单位（即相对于屏幕）：px em pt 绝对单位（固定的大小，与设备屏幕无关）：in cm 3、像素密度 像素密度指的是1英寸里面的像素的数量，比如1英寸里面是10px，通常有两种163（3gs） 330（4s）通常超过320的像素密度就是高清屏，计算方式：屏幕的分辨率高的平方+屏幕分辨率宽的平方 ，然后再开根号，再除以屏幕的英寸。 4、设备独立像素 设备独立像素表示真实像素和分辨率像素的一个比例，比如3gs手机高度480px，宽度320px分辨率，真实设备高度480px，宽度320px，即分辨率和真实像素一样的时候1pt = 1px；但是有一些设备高度960px，宽度640px，分辨率。真实设备高度480px，宽度320px，即分辨率是2倍的真实像素一样的时候，1pt = 2px。 5、物理像素和css像素 1、物理像素（分辨率的像素）960*640 2、css像素（真实像素）模拟器里面看见的320*568 6、视口 1、视口：浏览器的可视宽口在PC端是会受到浏览器窗口的变化而变化的 2、视口在pc端是可视窗口（会变的），在移动端会有一个固定的值，但通常默认980； 3、但是默认移动端的时候980会造成网页缩放或者出滚动条 4、解决移动端默认视口会造成网页缩放和滚动条，设置meta标签设置默认是视口的宽度等于设备的宽度 5、视口的其他属性初始化缩放initial-scale=1.0是否允许用户缩放user-scaleable=no，最大maximum-scale=1.0；和最小缩放minimum-scale=1.0； 6、meta：vp + tab 凡是写移动端页面，一开始就应该加上视口。