美文网首页
rem的最新适配(淘宝)之1px像素的问题解决

rem的最新适配(淘宝)之1px像素的问题解决

作者: 焚心123 | 来源:发表于2022-03-08 11:10 被阅读0次
    • 解决了在微信上1px像素的问题,这是整体js文件,不过要自己加meta移动端头部标签,这里的rem是除以10

    • 在css中直接写1px就可以了,其他的都用rem

      border: 1px solid gray;
    
    <meta name="viewport" id="WebViewport"
            content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    
      (function flexible (window, document) {
        var docEl = document.documentElement
        var dpr = window.devicePixelRatio || 1
      
        // adjust body font size
        function setBodyFontSize () {
          if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
          }
          else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
          }
        }
        setBodyFontSize();
      
        // set 1rem = viewWidth / 10
        function setRemUnit () {
          var rem = docEl.clientWidth / 10
          docEl.style.fontSize = rem + 'px'
        }
      
        setRemUnit()
      
        // reset rem unit on page resize
        window.addEventListener('resize', setRemUnit)
        window.addEventListener('pageshow', function (e) {
          if (e.persisted) {
            setRemUnit()
          }
        })
      
        // detect 0.5px supports
        if (dpr >= 2) {
          var fakeBody = document.createElement('body')
          var testElement = document.createElement('div')
          testElement.style.border = '.5px solid transparent'
          fakeBody.appendChild(testElement)
          docEl.appendChild(fakeBody)
          if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
          }
          docEl.removeChild(fakeBody)
        }
    
        var viewport = document.querySelector("meta[name=viewport]");
            var dpr = window.devicePixelRatio || 1;
            var scale = 1 / dpr;
            //下面是根据设备dpr设置viewport
            viewport.setAttribute(
                "content",
                "width=device-width,initial-scale=" +
                scale +
                ", maximum-scale=" +
                scale +
                ", minimum-scale=" +
                scale +
                ", user-scalable=no"
            );
    
      }(window, document))
    
    • 这是单个的小文件,也可以兼容1px的问题

         var viewport = document.querySelector("meta[name=viewport]");
            var dpr = window.devicePixelRatio || 1;
            var scale = 1 / dpr;
            //下面是根据设备dpr设置viewport
            viewport.setAttribute(
                "content", +
                "width=device-width," +
                "initial-scale=" +
                scale +
                ", maximum-scale=" +
                scale +
                ", minimum-scale=" +
                scale +
                ", user-scalable=no"
            );
     
            var docEl = document.documentElement;
            var fontsize = 10 * (docEl.clientWidth / 750) + "px";
            docEl.style.fontSize = fontsize;
    

    相关文章

      网友评论

          本文标题:rem的最新适配(淘宝)之1px像素的问题解决

          本文链接:https://www.haomeiwen.com/subject/siogdktx.html