适配方案(五)适配的基础知识之设备像素比 dpr 与 1px 物理像素
设备像素比 dpr 与 1px 物理像素
物理像素(physical pixel)
手机屏幕上显示的最小单元,该最小单元具有颜色及亮度的属性可供设置,iphone6、7、8 为:750 * 1334,iphone6+、7+、8+ 为 1242 * 2208
设备独立像素(density-indenpendent pixel)
此为逻辑像素,计算机设备中的一个点,css 中设置的像素指的就是该像素。老早在没有 retina 屏之前,设备独立像素与物理像素是相等的。
设备像素比(device pixel ratio)
设备像素比(dpr) = 物理像素/设备独立像素。如 iphone 6、7、8 的 dpr 为 2,那么一个设备独立像素便为 4 个物理像素!!!
【为什么是4,按理来说应该是2啊!这是一直困惑我的,我理解就是要考虑到宽和高,因为设备独立像素是计算机设备中的一个点,是点!!!,是宽1px,高1px,因为在 css 上设置的 1px 在其屏幕上占据的是 2个物理像素,也就是1 x 1的设备独立像素盒子在手机上其实就是2 x 2的设备物理像素盒子】
【设备像素比(dpr) = 物理像素/设备独立像素 == dpr = 2 x 2 / 1 x 1】
因此在 css 上设置的 1px 在其屏幕上占据的是 2个物理像素,0.5px 对应的才是其所能展示的最小单位。这就是 1px 在 retina 屏上变粗的原因,目前有很多办法来解决这一问题。
1px的物理像素的解决方案
viewport 的 initial-scale 具有缩放页面的效果。对于 dpr=2 的屏幕,1px压缩一半便可与1px的设备像素比匹配,这就可以通过将缩放比 initial-scale 设置为 0.5=1/2 而实现。以此类推 dpr=3的屏幕可以将 initial-scale设置为 0.33=1/3 来实现。
参考
适配方案(五)适配的基础知识之设备像素比 dpr 与 1px 物理像素的更多相关文章
- 【STM32H7教程】第25章 STM32H7的TCM,SRAM等五块内存基础知识
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第25章 STM32H7的TCM,SRAM等五块内 ...
- 适配方案(四)适配的基础知识之单位、分辨率、viewport
适配的基础知识 一.理解单位 px.pt.pc.sp.em.rem.dpr.dp.dip.ppi.dpi.ldpi.mdpi.hdpi.xhdpi.xxhdpi 如果你是ios开发,你需要了解的单位: ...
- Web 端屏幕适配方案
基础知识 像素相关 1.像素 :像素是屏幕显示最小的单位. 2.设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- webapp:移动端高清、多屏适配方案(zz)
来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...
- 解惑好文:移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- 移动端高清、多屏适配方案 [来源:http://div.io/topic/1092]
Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 移动端高清适配方案(解决图片模糊问题、1px细线问题)
本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...
随机推荐
- mongoose 建立schema 和model
在node中使用MongoDB很多情况下,都是使用mongoose的,所以这集来介绍一下 安装 yarn add mongoose 连接 const mongoose = require(" ...
- You can't specify target table 'a' for update in FROM clause
项目中有一个功能变动上线,其中有一张表ttt的字段cc,历史数据需要处理,把字段cc中为'xxx'的值替换为'yyy'. 表A结构如下: CREATE TABLE `ttt` ( `id` bigin ...
- ZT:阿里合伙人发文:十年磨一剑,自研数据库终拿世界第一
按:真正做技术的,就该这样. 以下为全文转载 (观察者网讯) 10月24日,阿里巴巴合伙人.高德总裁刘振飞在阿里云开发者社区发文,回忆从2009年启动“去IOE”工程到2019年OceanBase拿下 ...
- 前端知识点回顾——Reactjs
React.js 编写react需要安装的三个开发环境下的模块 babel 解析JSX react 实现ui用户界面 react-dom 处理dom JSX:在JavaScript里面写html代码( ...
- 虚拟化技术实现 — QEMU-KVM
目录 文章目录 目录 前文列表 KVM QEMU QEMU-KVM QEMU-KVM 调用 KVM 内核模块启动虚拟机的流程概要 前文列表 <虚拟化技术实现 - 虚拟化技术发展编年史> K ...
- 05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品
Config.dart class Config{ static String domain='http://jd.itying.com/'; } FocusModel.dart class Focu ...
- css简单学习属性2---背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- OpenStack Cinder发展动态系列--Austin峰会
在Mitaka版本,Cinder团队在多个特性和领域取得了重大进展. 本文将做一个简要的介绍:关于在Mitaka版本已经完成的功能和特性,以及讨论在Newton版本将会开发的功能和特性. 1 Cind ...
- 一个BADI中实施多个Implementation
转自:https://blog.csdn.net/zhongguomao/article/details/76251407 业务场景:例如我们需要对国家的税率做一个增强,以完成某种业务运算,但是每个国 ...
- centos 7设置limit,不生效问题
1:记录未修改之前的ulimit值 [root@bogon ~]# ulimit -a 2:修改配置文件 vim /etc/security/limits.conf 在后面添加 * s ...