移动端Web基础--像素

本文详细解析了移动端设备的物理像素、独立像素(CSS像素)以及像素密度(PPI)、设备像素比(DPR)的概念,探讨了不同设备上像素的差异,并通过实例说明了CSS像素在不同缩放和设备下的表现。

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

看了许多关于设备像素、视口的博客,有一部分内容写的不是很清楚,而且每篇博客的知识点的讲述也有些差异,看了许多都快把自己弄懵了,都不知道怎么理解才好,下面是我的总结。

设备像素

对于设备来说,有两个设备像素:物理像素、独立像素。

物理像素

指的是设备屏幕的物理像素,任何设备的物理像素数量都是固定的。
屏幕分辨率的意思是,设备屏幕上的物理像素个数。
比如iPhone 6 的屏幕分辨率为750像素*1334像素,表示在宽度上,有750个像素点,高度上有1334个像素点。
看看下面这组数据:

手机类型 屏幕尺寸 分辨率
Huawei P8 5.2英寸 1080*1920
Apple iPhone 6+ 5.5英寸 1080*1920

不同英寸大小的设备上,其分辨率怎么会相等呢?
在同一个设备上,一个物理像素所代表的物理长度是固定不变的;
在不同设备之间,一个物理像素所代表的物理长度是可以不同的;

JavaScript获取屏幕的物理像素尺寸

window.screen.width; 
win
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值