本文主要针对移动端1物理像素问题展开

解决这个问题先要了解一下概念:

CSS像素(CSS Pixel):(通俗说:样式中写的值)就是我们在样式代码中常写的逻辑像素,是一个抽象概念,实际并不存在

设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素

设备像素(Device Pixel)物理像素,设备能控制显示的最小单位,我们眼睛看到的屏幕上所呈现的像素大小就是这个,我们常说的1920×1080像素分辨率就是用的设备像素单位

设备像素比(devicePixelRatio:设备像素和设备独立像素的比例,即  devicePixelRatio = 物理像素 / 逻辑像素

简而言之:css像素就是逻辑像素的一种,逻辑像素又叫独立像素;物理像素又叫设备像素;像素比就是物理像素和逻辑像素的比例

devicePixelRatio的使用(以下简称dpr)

我们这里所说的 devicePixelRatio 其实指的是  window.devicePixelRatio 它是当前设备window对象的一个基础属性可在js中直接调用获取。

var dpr = window.devicePixelRatio;//获取当前设备的像素比
console.log(dpr);

不同的设备所对应的dpr并不是统一的,如下:

PC端

  1280*720分辨率下 获取的dpr值为1

  1920*1080分辨率下 获取的dpr值为1.25

iphone 6/7/8 手机设备下

iphone 6/7/8 plus 手机设备下

到底什么是1像素问题?

其实就是我们开发中写的明明是1px,但在有些设备上显示出来的却比1px更粗,不能100%还原设计稿的效果,没实现设计稿的效果这是致命的啊,会挨骂的啊!

理解了本文开头那些概念就很容易知道了,1像素问题就是设备像素比导致的,比如iPhone6的dpr是2,我们在css代码中写的值是1px,那么反映到屏幕上的物理像素就是2px,会显得很粗,所以通常开始写项目前要先做处理以适配不同的设备。

1像素问题解决方案

在移动端开发中经常能看见这段代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

规定了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。

① 媒体查询利用设备像素比缩放,设置小数像素

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border { border: 0.333333px solid #999 }
}

如上以最常见的两种dpr为2,3为例做处理进行缩放

【缺点】小数像素目前兼容性较差,一些以前的版本可能不支持。

② 操作 viewport + rem 适配 + js修改缩放值

var viewport = document.querySelector("meta[name=viewport]")//获取meta标签
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} var el = document.documentElement;
var fontsize = (el.clientWidth / 750) * 100 + 'px';
el.style.fontSize = fontsize;

这样以后在写样式代码的时候就用rem换算px

【缺点】因为涉及全局的rem单位,会影响整个项目,对于老项目会涉及到比较多的改动,适用于新项目。

以上只是两种本人喜欢用的方案,自身学习总结心得仅供参考,欢迎大佬指正交流。

转载请标明出处。

解决移动端1px的问题,设备像素比devicePixelRatio的应用的更多相关文章

  1. web移动端,需要清楚设备像素比devicePixelRatio的应用

    我们这里所说的devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持. 概念 devicePixelRatio ,它是 ...

  2. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

  3. 设备像素比devicePixelRatio简单介绍

    本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. ...

  4. css实现1px 像素线条_解决移动端1px线条的显示方式

    使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条. 1.利用box-shadow + transform & ...

  5. 解决移动端1px边框问题的几种方法

    1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中 ...

  6. border.css(解决移动端1px问题)

    由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .bord ...

  7. 适配方案(五)适配的基础知识之设备像素比 dpr 与 1px 物理像素

    设备像素比 dpr 与 1px 物理像素 物理像素(physical pixel) 手机屏幕上显示的最小单元,该最小单元具有颜色及亮度的属性可供设置,iphone6.7.8 为:750 * 1334, ...

  8. 理解设备像素、设备独立像素、css像素、viewport

    设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率 ...

  9. 设备像素,设备独立像素,CSS像素

    之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...

随机推荐

  1. 003_创建simulink文件

    001_创建simulink文件 1. 打开MATLAB,打开simulink 2. 打开空白模块 3. 保存,并打开模块的选择 4. 在模块里面选择后拖出模块后连线 或在搜索名称后拖出来 或在空白的 ...

  2. cas系列-cas REST协议(三)

    cas的rest协议 cas还支持rest协议方式进行访问,格式和参数如下: 1. 获取TGT 请求方式,路径,http协议及请求参数: POST /cas/v1/tickets HTTP/1.0 u ...

  3. Java核心复习—— ThreadLocal源码分析

    ThreadLocal,叫做线程本地存储,也可以叫做线程本地变量.ThreadLocal为变量在每个线程中都创建了一个副本,那么每个线程可以访问自己内部的副本变量. 一.如何使用 class Acce ...

  4. Cesium入门-1-展示一个地球

    Cesium 官网教程地址 https://cesium.com/docs/tutorials/getting-started//tutorials/getting-started/ 第一个程序代码: ...

  5. mac使用vnc远程登录ubuntu16.04桌面

    mac使用vnc远程登录ubuntu16.04桌面 1.安装在Ubuntu上安装x11vnc,如下: sudo apt-get install x11vnc 2.配置vnc密码 x11vnc -sto ...

  6. Ajax 是什么? 如何创建一个Ajax?

    ajax的全称:Asynchronous Javascript And XML. 异步传输+js+xml. 所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他 ...

  7. 【Oracle/Java】多表插删数据单多线程比较

    源码下载:https://files.cnblogs.com/files/xiandedanteng/OracleAccessComparison20191117.rar 做这个比较工程初衷是:我在单 ...

  8. SQL优化 | Oracle 绑定变量

    之前整理过一篇有关绑定变量的文章,不太详细,重新补充一下. Oracle 绑定变量 http://www.cndba.cn/Dave/article/1275 一.绑定变量 bind variable ...

  9. Linux工程管理器——make

    一.定义 工程管理器,顾名思义,是指管理较多的文件 Make工程管理器也就是个“自动编译管理器”,这里的“自动”是指它能构根据文件时间戳自动发现更新过的文件而减少编译的工作量,同时,它通过读入Make ...

  10. LC 516. Longest Palindromic Subsequence

    Given a string s, find the longest palindromic subsequence's length in s. You may assume that the ma ...