zoukankan      html  css  js  c++  java
  • 【实用】【移动端】Retain屏1px解决方案

    新浪微博HTML5版

    微博的实现方式(rem + 小数px)

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    !function(e){var a,i=navigator.userAgent.toLowerCase(),n=document.documentElement,t=parseInt(n.clientWidth);if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)||i.indexOf("like mac os x")>0){var s=/os [d._]*/gi,o=i.match(s);a=(o+"").replace(/[^0-9|_.]/gi,"").replace(/_/gi,".")}var r=a+"";"undefined"!=r&&r.length>0&&(a=parseInt(r),a>=8&&(375==t||667==t||320==t||568==t||480==t)?n.className="iosx2":(a>=8&&414==t||736==t)&&(n.className="iosx3")),/(Android)/i.test(navigator.userAgent)&&(n.className="android")}(window);
    

    通过以上js,判断是1x、2x、3x的设备,然后在html根元素上设置对应的className

    /* 普通屏 */
    .android .lite-topbar {
        border-top- 0;
        border-right- 0;
        border-bottom- 1px;
        border-left- 0;
        border-color: transparent;
        border-style: solid;
    }
    /* 2x屏 */
    .iosx2 .lite-topbar {
        border-image: none;
        border-top- 0;
        border-right- 0;
        border-bottom- .5px;
        border-left- 0;
    }
    /* 3x屏 */
    .iosx3 .lite-topbar {
        border-image: none;
        border-top- 0;
        border-right- 0;
        border-bottom- .35714px;
        border-left- 0;
    }
    

    淘宝饿了么

    淘宝和饿了么的实现方式(rem + 动态修改meta)

    <!-- 普通屏 -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 2x屏 -->
    <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    <!-- 3x屏 -->
    <meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
    

    由于viewport(视窗)变为原来的2x或者3x,所以html的fontSize也要随着变为原来的2x或者3x。

    2x屏:原来的1dpr = 2px 当视窗变为2倍时,也就变成了 1dpr = 1px
    3x屏:原来的1dpr = 3px 当视窗变为3倍时,也就变成了 1dpr = 1px

  • 相关阅读:
    详解Oracle安装与配置.
    如何做大规模软件的配置管理
    关于软件权限设置的一点心得体会
    使用RDLC报表(一)
    详细解析Linux scp命令的应用
    spring propertyplaceholderconfigurer
    hibernate ehcache
    由Eclipse内存不足谈谈JVM内存
    事务策略: API 层策略
    什么叫控制反转(IoC )
  • 原文地址:https://www.cnblogs.com/jarjune/p/8605860.html
Copyright © 2011-2022 走看看