最新HTMLCSS学习：移动端项目准备工作（笔记二十）_html移动端笔记

2401_84281748

于 2024-05-02 12:43:20 发布

阅读量821

点赞数 8

分类专栏：程序员文章标签：学习笔记 html

本文链接：https://blog.csdn.net/2401_84281748/article/details/138390095

版权

程序员专栏收录该内容

159 篇文章 2 订阅

订阅专栏

<!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />


<!-- 忽略将页面中的数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />


<!-- 忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection" content="email=no" />


<!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />


<!-- ios7.0版本以后，safari上已看不到效果 -->
<!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

重点设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    width = device-width：宽度等于当前设备的宽度
    initial-scale： 初始的缩放比例（默认设置为1.0）
    minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
    maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
    user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

分辨率，PPi,DPI,DPR,物理像素，逻辑像素区别

1、屏幕尺寸：指的是屏幕对角线的长度

2、分辨率：是指宽度上和高度上最多能显示的物理像素点个数

3、点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小

4、PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度

5、DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思

6、设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。

7、设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。

8、css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)

9、DPR(设备像素比)：设备像素比 = 设备像素（物理像素） / 设备独立像素（逻辑像素）。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素)