加载中...
移动端开发H5页面,各种问题介绍
发表于:2023-06-03 | 分类: 移动端

本文主要用于梳理移动端开发的一些概念

基础概念

屏幕尺寸

平时,我们所说的手机屏幕尺寸指的就是手机显示屏对角线的长度,单位是英寸,而一英寸 = 25.4毫米。可以通过勾股定理的公式先算出对角线的长度,然后再计算出屏幕的尺寸

image.png

不同手机的屏幕尺寸不同,厂商在生产的时候就已经规定了。记住,千万别和机身尺寸搞混了。我们以iphone8为例

image.png

我们可以看到,iphone8的屏幕尺寸是4.7英寸,也就是通过测量屏幕的宽高计算出来的(这个数据官方没有,如果你有工具,可以自己测量一下屏幕的宽高来计算验证一下)。

而机身尺寸是138.4mm * 67.3mm * 7.3mm(厚度)(该数据来自官方)

其他设备的同样尺寸计算方式也同上

物理像素

手机的物理像素原理基于液晶(**LCD(Liquid-crystal-display)**)的工作原理,将屏幕表面分成许多微小的像素。每个像素由一个液晶元素和一个透明的导电膜组成。

比如,iphone8是1334 x 750 像素分辨率, 对应的就表示在iphone8的屏幕中有1334 * 750个发光单元,这也就是他的物理像素。

通常,设计师给的UI设计稿上的“px”指的就是物理像素。

逻辑像素

逻辑像素是指一个像素点在不同设备的显示效果,通常指的是在相同的物理像素密度下(像素总数除以设备的尺寸),使用不同的倍频渲染技术,在不同设备上呈现的不同效果。例如,iPhone 8拥有750x1334的分辨率,这意味着手机屏幕具有750个物理像素宽和1334个物理像素高。然而,逻辑像素是由Retina Display技术生成的一种像素概念,它将iPhone 8屏幕的物理像素分成2x逻辑像素和3x逻辑像素。2x逻辑像素显示法在屏幕上显示750x1334的分辨率,而3x逻辑像素则呈现了1125x2001的分辨率,此结果在正确的屏幕大小下,可以呈现更清晰、更细腻的显示效果。

其他详细内容

  1. 深入浅出Viewport
  2. 移动端开发-物理像素、逻辑像素、DPR等概念梳理
  3. 移动端H5页面开发指南
  4. H5 页面适配iPhone 刘海,就是那么简单

参考内容

上一篇:
记一次关于vscode在mac中卡顿的问题
下一篇:
前端日常-基于React-Router(V6)的权限控制
本文目录
本文目录