zoukankan      html  css  js  c++  java
  • mobile_1 物理像素

    1 物理像素

    需求: border: 1px solid red; 在移动端 dpr 为 2 的屏幕上,实际上是 2 物理像素。    如何实现 1 物理像素?

     

    首先,肯定不能 border: 0.5px solid red;

    因为 有些 PC 不支持小数 px,或者浏览器会将小数 px 取整,即变成 1px

     

    • 原理: 让 css 面积减小,initial-scale = 0.5,布局视口变大
    • 需要解决的问题是,元素的 width margin 这样的布局 px 变小了?
      • 解决: 使用 rem 适配 乘回来就好了

     

    • 具体代码
      •         (function(){
                    var width = document.documentElement.clientWidth;    // 屏幕宽度 375
                    
                    var dpr = window.devicePixelRatio;    // 获取 dpr
                    var scale = 1/dpr;    // 获取实现 1 像素的比例    0.5
                    
                    // 通过系统缩放  initial-scale=0.5
                    var metaNode = document.querySelector('meta[name="viewport"]');
                    metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no')
                    
                    // 此时获取布局视口为 750px
                    width = document.documentElement.clientWidth;
                    
                    // 页面中布局元素 * 2  
                    var styleNode = document.createElement('style');
                    styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
                    document.head.appendChild(styleNode);
                }());

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    单例模式
    分析GC日志
    JVM运行时参数
    JVM监控及诊断工具-GUI篇
    JVM监控及诊断工具-命令行篇
    性能监控与调优(概述篇)
    再谈类的加载器
    类的加载过程(类的生命周期)详解
    字节码指令集
    class文件结构
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/10018214.html
Copyright © 2011-2022 走看看