移动端1px解决方案

超、凢脫俗 2022-06-05 00:58 330阅读 0赞

理论知识：

1、以iphone6为例，375px宽。也就是说，假如你写一个div的css的width为375px，他就会撑满屏幕；

2、DPR：以iphone6为例，DPR为2。也即是说，他实际是在用4个像素（2x2）在显示你在css中写的1px像素点；

3、也就是说，iphone6虽然是375px宽，但是他实际x轴的像素点是750（375px \* 2DPR）；

4、那么假如你需要显示1px宽的线条，只需要写0.5px宽就行了（2个像素宽显示1px的css宽，那么1个像素显示0.5px的css宽）；

5、理论上以上就解决了1px问题，但是等等，假如DPR为1或者3呢？总不可能对不同DPR的浏览器写不同的css样式吧；

6、那么initial-scale（缩放）就来解决这个问题了。initial-scale=1表示维持初始状态不变（但不写跟=1的效果是不同的）；

7、initial-scale=0.5表示屏幕缩放到原来的50%宽和高，也就是说，原来屏幕可以显示375px的宽，现在可以显示750px的宽度了；

8、相当于0.5 \* 2（这里的2是DPR的值）个屏幕像素，来表示1个CSS像素；

9、那么假如我css里写1px，并且想让屏幕用1px像素（也就是说，iphone6的375px像素里有750个像素点，我这里只想让他用1个像素点）来显示；

10、那么设置initial-scale = ( 1 / 屏幕的DPR值 ) 就可以了；

具体代码如下：

function resolve1px () {
      try {
        var dpr = window.devicePixelRatio
        if (!dpr) {
          return
        }
        var scale = 1 / dpr
        document.querySelector(`meta[name='viewport']`).setAttribute('content', `width=device-width， initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`)
      } catch (err) {
        console.log('当前机型不支持1px解决方案')
      }
    }

vw和rem：

1、vw是相对屏幕，所以本解决方案对于vw和vh不影响；

2、而rem如果取值时是相对于clientWidth来取值的话，也不影响，如果是针对其他的，那么可能会有影响（应该不会针对其他的吧）；

3、rem的设置代码，应写于这里的代码之后，因为这里的代码会影响clientWidth的数值；

发表评论取消回复

表情：

评论列表（有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端1px解决

过伪类 ::after。，原理就是通过transfrom:scaleX scale scaleY这几个函数进行缩放， ![watermark_type_ZmFuZ3po...

痛定思痛。/ 2024年04月19日 08:49/ 0 赞/ 60 阅读

相关移动端1px问题的几种常见解决方案

前言 ![format_png][] 在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中

我不是女神ヾ/ 2023年05月22日 08:53/ 0 赞/ 26 阅读

相关移动端1px问题解决方案

高清屏中1px线问题在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，

灰太狼/ 2022年11月20日 04:47/ 0 赞/ 314 阅读

相关移动端1px

写本篇文章的时候是看了 [移动端1px问题解决方案][1px] ，这里面介绍了多种解决方案，我本篇文章只着重介绍伪元素先放大后缩小的方法。可以先点击查看效果链接，建议在

拼搏现实的明天。/ 2022年10月20日 12:24/ 0 赞/ 204 阅读

相关移动端1px解决方案

理论知识： 1、以iphone6为例，375px宽。也就是说，假如你写一个div的css的width为375px，他就会撑满屏幕； 2、DPR：以iphone6为例，DPR

超、凢脫俗/ 2022年06月05日 00:58/ 0 赞/ 331 阅读

相关实现移动端1px边框

最近学了一下vue的实战课程，学习到了其中的一个页面设计技巧，觉得深有感触，于是便写个博客记录下来，以便下次查阅项目中是通过vue+stylus来实现的，那么首先需要说一下

心已赠人/ 2022年05月30日 00:12/ 0 赞/ 211 阅读

相关移动端1px误差的原因以及解决方案

移动端1px问题在面试和工作中会经常遇到，系统地理解它是一个优秀前端的必修课！为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的

一时失言乱红尘/ 2022年05月25日 02:30/ 0 赞/ 578 阅读

相关移动端1px边框

移动端1px边框 /高清屏 1px border/ .border-1-px, /1px 边框/ .border-1-px-radius, /1p

雨点打透心脏的1/2处/ 2022年01月29日 03:13/ 0 赞/ 220 阅读

相关移动端之1px实现

说明当我们在css里写 border: 1px solid \000的时候，用户会觉得边线依然很粗不美观。如何实现比1px更细的边线呢？下面列举了几种方案。问题根

痛定思痛。/ 2022年01月12日 15:13/ 0 赞/ 297 阅读

相关移动端小于1px边框

.border-top{position: relative;border-top: none !important;} .border-top:after {

约定不等于承诺〃/ 2021年12月21日 17:23/ 0 赞/ 285 阅读