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

Chase620 等级 479 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,如有侵权,请联系删除。

收藏
评论区

相关推荐

解决ios软键盘收回时屏幕空白问题
添加事件:window.scrollTo(x,y) 在input的释焦事件中添加blur事件, 参数X要在窗口文档显示区左上角显示的文档的 x 坐标。 参数y要在窗口文档显示区左上角显示的文档的 y 坐标。 添加jQuery插件 mounted(){ //解决ios 软键盘弹出屏幕空白 $("input,select,te
安装vscode后电脑启动黑屏问题和vscode命令行无法输入
这个问题困然我好久,网上各种答案都是试了一遍,虽然暂时能用,但是vscode中的命令行无法输入一直就是我内心的痛,今天终于找到了 当我启动后发现出现黑屏,按照说法就是勾选兼容模式 (https://imghelloworld.osscnbeijing.aliyuncs.com/8ba961f252e0d5fface5234e51a6216
工作问题记录总结2021--1
1 问题:在ios设备,怎么判断玩家是从通过浏览器进入,还是通过主屏幕点击进来的? 解决方法:(不刷新页面,但是改变页面的url地址) 1 用户在第一次使用浏览器进入的时候,给url地址添加标记, 2 当用户添加到主屏幕的时候,就多了标记 3 网页打开的时候,判断是否有这个标记,如果有这个标记,就是通过主屏幕进入,如果没有这个标记,就是通过浏览器进入 主
移动端H5开发常用技巧总结
html 篇 常用的meta属性设置 meta对于移动端的一些特殊属性,可根据需要自行设置 <meta name"screenorientation" content"portrait" //Android 禁止屏幕旋转 <meta name"fullscreen" content"yes"             //全屏显示
2021年前端趋势预测
淘系前端团队 2021年前端趋势预测 作者: 发布于: 知乎上,有人提问《2021前端会有什么新的变化?》 狼叔的回答二天超过6.1万阅读量,目前444个赞同,2个专业徽章,整体上看,这篇回答大家还是相当认可的。 (https://imghelloworld.osscnbeijing.aliyuncs.com/d2fa7c39e3e0
宁可用python倒读红楼梦,也不向拼多多低头
↑一个宝藏公众号,有趣的不像个技术号 刚屏蔽了天猫的盖楼,没想到大家把拼多多链接玩出了花样 (https://imghelloworl
给公司面试了100多个前端,心态差点给爷整崩了
公司最近在做扩招,从去年到现在给公司面试前端,到现在大概面了100200个,给我整哭了 简历简历不带,问点基础题,一问三不知, 问个水平垂直居中布局,支支吾吾半天说不出来, 还有个弟弟说你这样问我不知道怎么回答,累了。 我只想说,这真的有三年的经验嘛? (https://imghelloworld.osscnbeijing.aliyu
不好意思,它就是电影票房榜上的烂片!
(https://imghelloworld.osscnbeijing.aliyuncs.com/c56ab048680b8a1d6fe506220a3742df.png) 大家好,我是小五 继春节档首日票房超17亿元刷新纪录后,2021年中国电影票房再创新高,突破100亿元! 这其中我也贡献了好几张票,今天就跟大家聊聊春节档
【前端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
Java练习(二)——寻找一个加100为完全平方,再加168还是完全平方的数
题目:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?(该数小于100)【提示:如果一个整数是另外一个整数的平方,那么该数被称为完全平方数。】 package test;public class Pratice2 public static void main(String[] args) // TODO Au
栅格布局xs sm md lg xl
1.单位xl对应屏幕 1920 px 超大显示器lg对应屏幕1200px,小于 1920px 台式19201080显示器md对应屏幕992px,小于1200px 适合笔记本sm对应屏幕768px,小于992px 适合平板xs对应屏幕<768 手机端屏幕例如有如下代码将屏幕分成3列,进行响应式布局当屏幕的大小变成手机般大小(屏幕宽度<768px)时只显示xs2
PHP 调用微信小程序 OCR 接口
添加插件在小程序后台 设置 第三方设置 插件管理 中添加 OCR支持 插件。 服务购买在 中购买接口配额。 免费版本目前配额为 100 次/日,可用 36500 天。 接入如果是小程序前端接入,参考上方网页“接入文档”即可。 定义接口常量phpconst OCRBANKCARD 'https://api.weixin.qq.com/cv/ocr
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
服务器项目部署总结(超详细)
系列文章目录<font colorblack face"微软雅黑" size3 本篇文章主要从准备篇、项目开发、项目打包、项目部署四个部分去介绍如何把前后端分离的项目部署到阿里云服务器,在服务器上去玩自己的项目。项目最终效果图:输入ip即可访问!!!<hr style" border:solid; width:100px; height:1px;" col