微信小程序(布局适配与物理逻辑像素)

本文详细介绍了微信小程序中涉及的布局适配和像素概念,包括物理像素、逻辑像素、像素密度PPI、设备像素比DPR、视网膜显示屏Retina以及rpx、vw、vh等尺寸单位的使用。通过理解这些概念,开发者可以更好地进行移动端适配,特别是微信小程序的开发。

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

前言

  • 移动端开发经常遇到一些概念:物理像素、逻辑像素、像素密度、像素比等,本节来详细介绍下
  • 关键词:
  • 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。

屏幕尺寸

  • 华为荣耀7
    在这里插入图片描述
  • 图上写的是5英寸。那么这个5英寸到底是怎么算出来的呢?
  • 先进行一下单位的换算1英寸(inch)=2.54厘米(cm)
  • 屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米
  • 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
  • 如何计算手机尺寸?
    知道手机屏幕的长和宽,然后利用勾股定理,就可以算出斜边的长了。还有个更简单的方法,只要用尺子量一下它的对角线是多少厘米,然后再换算成英寸就搞定了。
    在这里插入图片描述
    在这里插入图片描述
  • 设备尺寸是指设备对角线的长度,单位为英寸(inch),简称“寸”。

物理像素–UI设计师像素

  • 物理像素/屏幕分辨率/物理分辨率:
  • 屏幕分辨率是屏幕像素的数量,一般用屏幕宽度的像素点乘以屏幕高度的像素点,指的是设备屏幕实际拥有的像素点。
  • 单位:px,即1px=1个像素点
  • 比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750px*1334px个物理像素
  • 注意:屏幕分辨率即物理像素是固定的,这是厂商在出厂时就设置好的,也就是说一个设备的分辨率是固定的
  • 设备像素一般采用 水平分辨率 和 垂直分辨率 组成。
  • 例如:iPhone 6 的设备像素为 750 * 1334。
  • “设备像素”的特点:
    出厂就设置好
    是设备的固有属性
    不会发生变化。
  • 苹果系列商品的参数

在这里插入图片描述

  • 重点:
  • UI----物理像素
  • 前端—逻辑像素

逻辑像素/设备独立像素DIP—WEB

  • 逻辑像素/设备独立像素
  • 也叫“设备独立像素”(Device Independent Pixel, DIP),可以理解为反映在CSS/JS代码里的像素点数。
  • 这个是计算机坐标系统里的虚拟慨念,这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)
  • 设备独立像素:Device Independent
微信小程序默认是以手机屏幕尺寸作为设计基准的,但在 iPad 上运行时,如果不做特殊处理,可能会导致界面显示效果不佳。为了提升用户体验,开发者可以对微信小程序进行专门针对 iPad 的优化和适配。 ### 一、如何判断是否为iPad设备 首先需要检测当前使用的设备是不是 iPad ,这一步通过 `wx.getSystemInfo` 或者其同步版本 `wx.getSystemInfoSync()` API 来获取系统的相关信息完成: ```javascript const systemInfo = wx.getSystemInfoSync(); if (systemInfo.model.indexOf('iPad') !== -1) { // 当前是 iPad 设备... } ``` ### 二、页面布局调整 对于平板电脑的大屏特性来说,通常会采用更宽广的设计方案,如分栏式导航等。可以通过CSS样式设置不同的断点规则适应不同宽度下内容展示的需求;同时也可以利用条件渲染机制,在特定场景下调用适合于大屏的组件或模板文件。 例如在WXML中使用类似于下面这样的语法来进行条件加载资源: ```xml <view wx:if="{{isIpad}}"> <!-- iPad 版本 --> </view> <view wx:elif="{{!isIpad && isPhone}}"> <!-- 手机端 版本--> </view> ``` 结合JS逻辑控制变量值即可轻松切换两套UI结构。 ### 三、响应式单位rpx的应用 微信小程序支持一种名为“rpx”的自适应像素单位。“rpx”可以根据屏幕宽度自动计算出合适的大小,使得元素能够在各种分辨率上保持良好的视觉比例。比如750rpx就等于iPhone6屏幕上的一整行高度(即750物理像素),其他尺寸则按相应缩放比转换而来。 当然还可以考虑加入一些额外的功能模块来增强交互体验感,像手势操作识别之类的特色功能也是不错的选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值