移动端基础

最新推荐文章于 2025-05-29 10:00:29 发布

一坨烤冷面

最新推荐文章于 2025-05-29 10:00:29 发布

阅读量185

点赞数

文章标签： html css html5 移动开发

本文链接：https://blog.youkuaiyun.com/weixin_50659023/article/details/112318616

版权

本文探讨了物理像素、分辨率、逻辑像素与设备像素比的关系，解释了高清屏下像素密度提升对设计的影响，以及视口概念（布局视口、视觉视口和理想视口）在响应式设计中的作用。重点介绍了meta标签在设定理想视口中的技巧，包括宽度、缩放和用户缩放控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 像素的相关问题

1.1 物理像素(像素点)
屏幕是这个样子的
在这里插入图片描述

1.2 分辨率
如上图，每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率
比如，小米11

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细所以，我们都喜欢买像素高的手机
1.3 1px=1个物理像素？
早期的手机屏幕，都是所谓的普通屏幕，也就是标清屏，1css像素=1个物理像素
但是随着 Retina(视网膜屏)等技术的兴起，能够将更多的物理像素点压缩至一块屏幕中，从而达到跟高的分辨率，提升屏幕显示的细腻度
现在的手机大多都采用Retina技术或者更高的显示技术手机A 分辨率：42（横向上两个像素点，纵向上4个像素点）手机B 分辨率：84 （横向上4个像素点，纵向上8个像素点）有1个宽 1px，高 1px 的元素要显示在屏幕上
如果使用物理像素表示 1px，结果就是手机B上显示的要比手机A上小
在这里插入图片描述
结论：不能使用物理像素表示元素尺寸
1.4 逻辑像素
逻辑像素（logical pixel）也叫CSS 像素设备独立像素 (dpi：device independent pixel)
实际开发中使用的像素

.box{
    width: 2px;  /* 逻辑像素 */
    height: 2px; /* 逻辑像素 */
}

在这里插入图片描述
总结：
1.在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 22 个物理象时表示在2.高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用44个物理像素表示
3.整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍
4.如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
5.css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与
在这里插入图片描述
1.5 设备像素比
dpr：device pixel ratio
dpr=设备像素/css像素(缩放比是1的情况，参考1.6缩放一节，就明白为什么加这个限制了)上面指的是同一方向上，也就是谈到设备像素比时，只考虑1个方向还是这张图片

左边的 dpr=1，右边的dpr=2所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制iphone 6 的 dpr就是2，iphone6+ 的 dpr=3
1.6 缩放
在这里插入图片描述

1.7 ppi
pixels per inch，表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力ppi，也称作 dpi(dots per inch)如小米11的 ppi 为 515屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数PPI 的计算方法
在这里插入图片描述
1.8 二倍图
对于一张50x50的图片在标清屏下打开，1css像素=1个物理像素如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题
核心思路：
1.比如希望在手机屏幕中显示一张100x100的图片
2.先制作一张200x200 的图片
3.通过css设置其逻辑尺寸为100x100
4.高清屏下手机浏览器会放大2倍显示，正好是200x200，正好是图片本身尺寸
5.注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果
2. 视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
2.1 布局视口 layout viewport
2.1 布局视口 layout viewport早期的网页都是为PC端设置的PC端屏幕相较手机屏幕要宽为了在手机上也能够显示这些为PC端专门设置的网页，出现了布局视口的概念布局视口的宽度一般为980，也有 1024 的
在这里插入图片描述

2.2 视觉视口 visual viewport

2.3 理想视口 ideal viewport
很明显，布局视口>视觉视口，所以会在视觉视口中出现横向滚动条但，很明显，这种体验差爆了
没有浏览器会这么做，而是，将网页内容进行缩放，缩放到在视觉视口中可以完全显示，造成的结果就是文字以及图片等变小，用户体验也是差爆了理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定需要设置 meta 标签进行设置meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

2.4 meta标签（理想视口的设定）
2.4.1 宽度设定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <style>
        .box{
            width: 300px; 
            height: 300px;
            background-color: #000;         
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意将自动生成的下面代码删除

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.4.2 缩放
前面谈到过缩放的问题页面在首次加载时，可以设置缩放比

考虑到兼容性，仍然建议两个属性都要写

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.4.3 用户缩放
上面是开发者设置的页面初始缩放比例，手机端浏览器默认是允许用户通过触摸动作进行页面缩放的
可以通过下面的属性控制：user-scalable=no
完整写法

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

2.4.4 最终版

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum=1,user-scalable=no"/>