加载中...
移动端开发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中卡顿的问题
下一篇:
移动端开发H5页面,各种问题介绍
本文目录
本文目录