目录前言：关于移动屏幕概念1 .屏幕尺寸2 .屏幕分辨率3 .屏幕像素密度(PPI=像素间距) 2、像素1 .物理像素2. CSS像素3 )设备独立像素4 .位图像素
前言随着移动终端H5需求场景的增加，比如微信公众号H5页面的开发、在APP中嵌入H5页面等，移动终端H5开发的基础知识和技巧是前端开发工程师必备的技能~
一、移动终端屏幕概念1 .屏幕尺寸手机屏幕对角线长度，单位：英寸，1英寸=2.54厘米
2 .画面分辨率、横向的像素点(物理像素)数)个数)为1px=1像素点，也称为物理像素，例如iphone6的画面分辨率为750*1336
3 .屏幕的像素密度(ppi=pixels per inch )与【屏幕尺寸】和【屏幕分辨率】有关，即取决于每英寸拥有的像素数
二、像素1 .物理像素屏幕分辨率是呈现像的最小单位
2. CSS像素web开发的最小单位。 一个CSS像素最终在移动设备上转换为物理像素，看起来像一个CSS像素，取决于【设备特性】、【用户缩放动作】。 3 .设备独立像素是抽象层，是连接设备和CSS像素的接口。 一旦CSS像素连接到设备独立像素(width=设备-设备) )。 在PC web开发中没有意义，没有这个概念。 4 .位图像素一个位图像素对应于一个设备独立像素，图像被完美清晰地表示
5 .像素比(dpr )【单向】满屏物理像素数/满屏设备独立像素数=devicePixelRatio获取像素比： window.devicePixelRatioiPhone6物理像素(分辨率)为750
三.视口1 .布局在视口中确定网页布局。 由于布局的宽度大于大多数手机屏幕的宽度，所以为了完全显示页面，只能放大缩小原始页面。 否则，需要左右拖动浏览。 document.documentelement.clientwidth布局视口宽度(大多数浏览器默认采用缩放方法)；2 .可视视口用户查看的网页中的正如您正在查看的网站的区域会变大，可视视口也会变大一样，放大网站会缩小网站区域，视觉视口也会变小。 几乎所有var visual=window.innerWidth可视视口都受支持。 3 .较大的设置，例如理想的视口布局视口和可视视口： 元数据=' viewport ' content=' width=device-width， 用户初始比例=1.0、最大比例=1.0、最小比例=1.0 '三、缩放动作1 .用户手动放大用户：一个CSS像素面积变大，区域更改的是可视视口)2.系统参照理想视口进行缩放，以更改布局视口和可视视口的meta: initial-scale=1.0 只有了解这些基础概念，才能掌握移动终端H5开发技巧~