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

  • 相关阅读:
    [原]将工程由VC6迁移到VS2005
    [原]DirectDraw视频播放要点
    [原]代码优化学习笔记
    [原]Linux文件交换
    [原]计划
    [原]写在2006年的最后一天
    [原]技术发展规划
    FindBugs的安装和使用
    VirtualBox常用命令
    eclipse中统计代码行数
  • 原文地址:https://www.cnblogs.com/jarjune/p/8605860.html
Copyright © 2011-2022 走看看