先看个概念:

window.devicePixelRatio = 物理像素 / dips(独立像素)

window.devicePixelRatio是设备的物理像素和独立像素的比例,可以叫设备像素比。

非视网膜屏幕的iphone上设备像素比是1,而retina屏幕的iphone,一般像素比是2或者3。

大部分的浏览器目前还在运行在设备像素比是1的系统上,当移动到retina类似设备上时候,就会遇到问题。

css pixels:是可以被硬件和软件调节的单位。一般浏览器的设备像素比是1,所以一个css像素就是代表一个物理像素,

1个像素比=物理像素/1pix,移动端的iphone普遍是retina屏幕,设备像素比是2或者3,那么1 pix对应的应该是2或者3个物理像素。

css中设置:width:1px,对应的物理像素是2px,就会显示变粗,手机机型不同,设备像素比不同,显示的物理像素就不同。

iphone5为例子:iphone5的css像素:320px*568px,dpr设备像素比是2,物理像素就是:(320*2px)*(568px*2),即是640px*1136px。

2 = 640px/320px

2 = 1136px/568px

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<!--width=device-width:宽度为设备宽度-->
<!--initial-scale:缩放比为1-->
<!--user-scalable=no:是否允许用户自定义缩放-->

所以,移动端的1px的适配问题,还是出自retina屏幕的设备像素比不等于1,而是2或者3。导致css的1px显示出来是2px或者3px变粗。那么针对设备像素比不等于1的设备单独进行px的设置是可行的。但是如果1px,写成.5px在IOS7及其以下或者安卓系统都显示0px。这种方法不可行。

建议的方案:

1,viewport结合rem解决像素比:

比如在像素比为2中设置meta标签:

scale = 1/devicePixelRatio,可以把数字换成变量scale,淘宝的移动端适配flexible.js就是这样子的原理。

<meta name="viewport" content="inital-scale=0.5,maxium-scale=0.5,minimum-scale=0.5,user-scalable=no">

在devicePixelRatio=3中设置meta里面的系数为0.3333333333,

2,transform和伪类:before :after

如果是border:1px,可以利用:before或者:after重新写border,并使用transform的scale缩小一半。transform:scaleY(50%)

结合js代码来判断是否是retina屏幕:

if(window.devicePixelRatio && devicePixelRatio >= 2){
//给div重新绑定样式
}

总结:移动端的1px变粗是因为retina屏幕的设备像素比不为1,导致实际显示可能是2px或者3px,可以改变meta标签里的scale系数,scale = 1/devicePixelRatio。一般是0.5或者0.333333,或者使用:before和:after结合transform的scale属性进行缩放。

【完】

移动端1px的适配问题的更多相关文章

  1. 移动端1px线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法

    其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法 原理:其实他们都是通过css3的媒体查询来实现的 步骤思路: 1.给目标 ...

  2. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  3. 移动端1px细线解决方案总结

    现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...

  4. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  5. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  6. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  7. 移动端1px细线解决方案--利用transform缩放方式

    移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bor ...

  8. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  9. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

随机推荐

  1. [LC] 293. Flip Game

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  2. django框架基础-ORM进阶-长期维护

    ###############    ORM进阶---contenttype    ################ 设计思路: """ 路飞有两种课,专题课和学位课, ...

  3. Weave实现跨主机容器互联

    安装与启动 直接从github下载二进制文件安装. docker_host1(服务器1): 下载weave # sudo wget -O /usr/local/bin/weave https://ra ...

  4. prototype与__proto__

    __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! 使用Object.getPrototypeOf()代替__proto__!!! 一.prototype 几乎所 ...

  5. verilog的function使用

    语法: function [range] function_id;    input_declaration    other_declarations    procedural_statement ...

  6. OpenCV 基本的阈值操作

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  7. 科研伴我成长——上海交通大学ACM班学生在微软亚洲研究院的幸福实习生活

    每一年,微软亚洲研究院都会迎来一批"特殊的"实习生--他们既不是从五湖四海汇聚而来,也不是在读的硕士和博士.他们相识已久,知道对方的小秘密.小八卦,也相互敬佩.惺惺相惜--他们就是 ...

  8. navisworks卸载/完美解决安装失败/如何彻底卸载清除干净navisworks各种残留注册表和文件的方法

    在卸载navisworks重装navisworks时发现安装失败,提示是已安装navisworks或安装失败.这是因为上一次卸载navisworks没有清理干净,系统会误认为已经安装naviswork ...

  9. UAC table

    CREATE TABLE `sys_dept` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '编号', `name` varchar(50) D ...

  10. Docker学习笔记_04 Rancher的部署安装(编排选用K8S)

    原文地址:http://dbase.cc/2018/01/12/docker/04_rancher的部署安装/ 为什么要使用Rancher Rancher是一个开源的企业级容器管理平台.通过Ranch ...