移动H5的常见知识点

最新推荐文章于 2024-09-26 20:06:41 发布

kiscon

最新推荐文章于 2024-09-26 20:06:41 发布

阅读量1.2k

点赞数

文章标签：移web webview 设备像素比

本文链接：https://blog.csdn.net/kiscon/article/details/105760299

版权

webview：原生提供运行在应用程序的内核浏览器，内核是webkit

像素

DPI/PPI：像素密度，表示屏幕每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像。
- 结论：屏幕尺寸固定时，当PPI 越大，像素的实际大小就会越小，当PPI越小，像素实际大小就越大。
设备独立像素：保证图像内容在不同的PPI设备看上去大小应该差不多，在IOS设备上叫PT，Android设备上叫DIP或DP。与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。
- dp和px的比例关系：window.devicePixelRatio ~= 物理像素/设备独立像素
物理像素：指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质。
- 获取屏幕的物理像素尺寸
  - window.screen.width; window.screen.height;
设备像素比：dpr（device pixel ratio）：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取。
CSS像素（CSS Pixel）：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在。

移动端的视口

layout viewport（布局视口）指的是我们可以进行网页布局区域的大小
    document.documentElement.clientWidth;
    document.documentElement.clientHeight;
idear viewport（理想视口） 设备屏幕区域
    新设备 / 老设备
    window.screen.width / window.devicePixelRatio;
    window.screen.height / window.devicePixelRatio;

meta标签

用meta标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable=0，就构建了一个标准的移动web页面。

<meta name="viewport" content="width=device-width, initial-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0, user-scalable=0">
    
width：宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale：页面的初始缩放比，大于0的数字
               即layout viewport/ideal viewport宽度，相当于设置两个视口宽度相等
maximum-scale：当前页面的最大缩放比，大于0的数字
minimum-scale：当前页面的初始的最小缩放比，大于0的数字
user-scalable：用户是否可以缩放，yes或no（1或0）

让部分国产浏览器默认采用高速模式渲染页面

<meta name="renderer" content="webkit">

device-width：当前设备宽度
width：当前视口（浏览器）的宽度
min-device-width：在移动端和期望值一样 device：设备，它是指当前设备的宽度。
当拖动来改变浏览器大小的时候，当前终端设备的宽度并不会变化，意味着媒体查询条件不会响应
min-width：在pc端和移动端能正常的响应，效果一致。它是指当前可视区域的宽度

flexible.js原理

根据 document.documentElement.clientWidth 动态修改 <html>的 font-size ，页面其他元素使用 rem 作为长度单位进行布局，从而实现页面的等比缩放。

布局单位

px：像素
em：参考物是父元素的font-size，浏览器默认字体大小是16px
rem：参考物是相对于html根元素
vm：相对于视口的宽度，视口被均分为100单位，1vw等于视口宽度的1%
vh：相对于视口的高度，1vh等于视口高度的1%

1px问题

1px变粗的原因：因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，它可以反应css中的像素与设备的像素比。在retina屏的iphone手机上，这个值为2或3， css里写的1px长度映射到物理像素上就有2px或3px那么长。

解决方案：

1.viewport + rem

2.transform: scale(0.5)

3.媒体查询 + transfrom