首页 > 代码库 > 移动web开发中屏幕适配问题
移动web开发中屏幕适配问题
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 凡是写移动端页面，一开始就应该加上视口。
移动web开发中屏幕适配问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。