【前端100问】Q68:如何解决移动端 Retina 屏 1px 像素问题

Chase620 等级 768 0 0

写在前面

此系列来源于开源项目:前端 100 问:能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题,督促自己
从多方面多角度总结答案,丰富知识
如何解决移动端 Retina 屏 1px 像素问题
简书整合地址:前端 100 问

正文回答

问题是 现在已经没有1px的问题了啊。17以前的BUG了吧?

造成边框变粗的原因

其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。

devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。

1、0.5px边框

解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框,如果可以,给html标签元素添加个class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// 脚本应该放在内,如果在里面运行,需要包装 $(document).ready(function() {}) 

div { border: 1px solid #bbb; } .hairlines div { border-width: 0.5px; }


2、使用`border-image`实现

.border-bottom-1px { border-width: 0 0 1px 0; -webkit-border-image: url(linenew.png) 0 0 2 0 stretch; border-image: url(linenew.png) 0 0 2 0 stretch; }


3、使用`background-image`实现

.background-image-1px { background: url(../img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; }


4、多背景渐变实现

.background-gradient-1px { background: linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat, linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat; } /* 或者 */ .background-gradient-1px{ background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x; background-size: 100% 1px; }


5、使用`box-shadow`模拟边框

.box-shadow-1px { box-shadow: inset 0px -1px 1px -1px #c8c7cc; }


6、viewport + rem 实现

7、伪类 + transform 实现

/* 单条border样式设置 */ .scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }

/* 四条boder样式设置 */ .scale-1px{ position: relative; margin-bottom: 20px; border:none; } .scale-1px:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }

`````` // 判断是否 Retina 屏 if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector('ul').className = 'scale-1px'; }

```

参考原文 7 种方法解决移动端 Retina 屏幕 1px 边框问题

本文转自 https://www.jianshu.com/p/bcae724172a3,如有侵权,请联系删除。

收藏
评论区

相关推荐

【前端100问】Q68:如何解决移动端 Retina 屏 1px 像素问题
写在前面 此系列来源于开源项目:前端 100 问:能搞懂 80%的请把简历给我(https://links.jianshu.com/go?tohttps%3A%2F%2Fgithub.com%2Fyygmind%2Fblog%2Fissues%2F43) 为了备战 2021 春招 每天一题,督促自己 从多方面多角度总结答案,丰富知
【Flutter实战】流式布局(Wrap、Flow)
4.4 流式布局在介绍Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误,如:dartRow( children: <Widget Text("xxx"100) ,);可以看到,右边溢出部分报错。这是因为Row默认只有一行,如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutt
服务器项目部署总结(超详细)
系列文章目录<font colorblack face"微软雅黑" size3 本篇文章主要从准备篇、项目开发、项目打包、项目部署四个部分去介绍如何把前后端分离的项目部署到阿里云服务器,在服务器上去玩自己的项目。项目最终效果图:输入ip即可访问!!!<hr style" border:solid; width:100px; height:1px;" col
CSS 样式注意、常识
padding 的值,不能为负数。 使用 absolute 后,在定义好 width 和 height ,使用 border 的 width 和 height 会变大、变宽。 设置好看的细线  .thinBorder:after{     content: '';     width: 100%;     display: block;    
java.net.ConnectException:Connection timed out:connect 出现连接超时的问题?
今天在eclipse中连接Linux上的MySQL出现了java.net.ConnectException:Connection timed out,具体如下图: ![](https://oscimg.oschina.net/oscnet/7e0f35e44f3623da2d108249e4ff9e2195e.png)   我猜想可能是因为防火墙没关导
java访问Https服务的客户端示例
关于证书 ==== 1、每个人都可以使用一些证书生成工具为自己的https站点生成证书(比如JDK的keytool),大家称它为“自签名证书”,但是自己生成的证书是不被浏览器承认的,所以浏览器会报安全提示,要求你手动安装证书,提示风险,是否继续等。只有通过权威的CA机构付费获得的证书才能被浏览器承认。 2、证书(无客户端服务端之分)保存着IP信息、证书过
H5游戏开发:横屏适配
![](https://oscimg.oschina.net/oscnet/47de65ea09400742fe6f94e31617515ec36.jpg) 对于移动端的轻量级 HTML5 互动小游戏(简称为 H5 轻互动),如果从屏幕呈现模式来划分的话,可以归类为:竖屏式和横屏式。 ![](https://oscimg.oschina.
2016.07 第2周 群问题分享
![](https://oscimg.oschina.net/oscnet/d26128fec4f1a6ac6a9bebb574017bc764c.jpg) **HTML+CSS** ### 移动端中1px的边框如何实现 ![](https://oscimg.oschina.net/oscnet/502ef7f5ea07f51fee8ffef1ffc
Android计量单位px,in,mm,pt,dp,dip,sp和获取屏幕尺寸与密度
###########################################**Android计量单位###########################################** px   :是屏幕的像素点 in    :英寸 mm :毫米 pt    :磅,1/72 英寸 dp   :一个基于density的抽象单
ALV Tree
找相关的alv tree demo:se38 -> bcalv\_tree\* 1.创建对话屏幕 由于ALV没有专门实现的控件,需要先在对话屏幕100上增加一个**用户自定义控件区域**(Custom Control),名为CONTAINER1 ![](https://oscimg.oschina.net/oscnet/ed7c8537b24e1a1c
Google最新的图片格式WEBP全面解析
#### 前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值且值得探索的事情。 但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致, 若想改变现状开辟新局面,便要有釜底抽薪的胆量
Qt Mac OS、iOS和X11的Retina显示支持
[Mac OS、iOS和X11的Retina显示支持](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.qt.digia.com%2Fcn%2F2013%2F05%2F02%2Fretina-display-support-for-mac-os-ios-and-x11%2F) ---
Springboot+vue实现上传视频并在线播放功能
点击上方 web项目开发,选择 设为星标 优质文章,及时送达 效果图 前端上传视屏页面 ![](https://oscimg.oschina.net/oscnet/c044525090ad8cb0f4762c24a15724b5bb8.png) 前端上传视屏成功页面 ![](https://oscimg
svg自适应写法
svg自适应写法 <pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="width:30%; height:3.6rem;"> <svg
tomcat启动问题,卡在 preparing launch delegate 100% 的解决方法
**tomcat启动问题,卡在 preparing launch delegate 100% 的解决方法** 参考文章: [(1)tomcat启动问题,卡在 preparing launch delegate 100% 的解决方法](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww