| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
mom213
5年前发布

REM 手机屏幕高清适配方案

   <p>REM适配主要解决在不同屏幕宽度下,布局和元素尺寸保持一致,即屏宽大的对应尺寸也大。而单独使用这个方案在要求更高的『高清适配』中,就有些力不从心了。</p>    <p>先来简单了解一下什么是『DPR』,以及 DPR 带来的影响。</p>    <p>DPR:当前显示设备上的一个物理像素的尺寸与一个设备独立像素的尺寸(dips)的比率。</p>    <p>直白一点,对前端开发来说, <em>如果不进行特殊设置</em> ,就是在 dpr = 1 的设备上,css中设置1px,对应显示在屏幕上也是1像素(物理像素)。 dpr = 2 的设备上(如iPhone6),css中设置1px,对应显示在屏幕上会是2像素(物理像素)。同理,在 dpr = 3 的设备上如(iPhone6 Plus),css中设置1px,对应显示在屏幕上会是3像素(物理像素)。至于详细的关系,这里就不多说了,网上有很多关于 dpr 的说明。</p>    <p>现在来看『高清适配』要解决两个问题:</p>    <ul>     <li>1px问题:即在不同高清屏幕下,设置为1px,希望显示也为1像素(物理像素)。尤其是在边框上此问题比较突出。</li>     <li>高清图片适配:将一张 100px * 100px 的图片显示在 100px * 100px 的区域时,由于在 dpr = 2 的设备上,对应的区域其实有 200 * 200 个像素(物理像素)点,所以在此设备上,这张图片相当于被拉伸了一倍,显示效果下降。因此要做到高清适配,我们需要在这样的设备上使用一张 200px * 200px 的图片,才能保证显示效果。反过来,如果统一使用 200px * 200px 的图片,则会造成流量浪费。</li>    </ul>    <p>问题清楚了,下面直接放出解决方案:</p>    <pre>  <code class="language-javascript">(function(designWidth, rem2px) {      var win = window;      var doc = win.document;      var docEl = doc.documentElement;      var metaEl = doc.querySelector('meta[name="viewport"]');      var dpr = 0;      var scale = 0;      var tid;        if (!dpr && !scale) {        var devicePixelRatio = win.devicePixelRatio;        if (win.navigator.appVersion.match(/iphone/gi)) {          if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {            dpr = 3;          } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){            dpr = 2;          } else {            dpr = 1;          }        } else {          dpr = 1;        }        scale = 1 / dpr;      }        docEl.setAttribute('data-dpr', dpr);      if (!metaEl) {        metaEl = doc.createElement('meta');        metaEl.setAttribute('name', 'viewport');        metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');          if (docEl.firstElementChild) {          docEl.firstElementChild.appendChild(metaEl);        } else {          var wrap = doc.createElement('div');          wrap.appendChild(metaEl);          doc.write(wrap.innerHTML);        }      } else {        metaEl.setAttribute('name', 'viewport');        metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');      }      // 以上代码是对 dpr 和 viewport 的处理,代码来自 lib-flexible。        // 一下代码是处理 rem,来自上篇文章。不同的是获取屏幕宽度使用的是       // document.documentElement.getBoundingClientRect      // 也是来自 lib-flexible ,tb的技术还是很强啊。      function refreshRem(_designWidth, _rem2px){        // 修改viewport后,对网页宽度的影响,会立刻反应到         // document.documentElement.getBoundingClientRect().width        // 而这个改变反应到 window.innerWidth ,需要等较长的时间        // 相应的对高度的反应,        // document.documentElement.getBoundingClientRect().height         // 要稍微慢点,没有准确的数据,应该会受到机器的影响。        var width = docEl.getBoundingClientRect().width;        var d = window.document.createElement('div');        d.style.width = '1rem';        d.style.display = "none";        docEl.firstElementChild.appendChild(d);        var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));        d.remove();        var portrait = "@media screen and (width: "+ width +"px) {html{font-size:"+ ((width/(_designWidth/_rem2px)/defaultFontSize)*100) +"%;}}";        var dpStyleEl = doc.getElementById('dpAdapt');        if(!dpStyleEl) {          dpStyleEl = document.createElement('style');          dpStyleEl.id = 'dpAdapt';          dpStyleEl.innerHTML = portrait;          docEl.firstElementChild.appendChild(dpStyleEl);        } else {          dpStyleEl.innerHTML = portrait;        }        // 由于 height 的响应速度比较慢,所以在加个延时处理横屏的情况。        setTimeout(function(){          var height = docEl.getBoundingClientRect().height;          var landscape = "@media screen and (width: "+ height +"px) {html{font-size:"+ ((height/(_designWidth/_rem2px)/defaultFontSize)*100) +"%;}}"          var dlStyleEl = doc.getElementById('dlAdapt');          if(!dlStyleEl) {            dlStyleEl = document.createElement('style');            dlStyleEl.id = 'dlAdapt'            dlStyleEl.innerHTML = landscape;            docEl.firstElementChild.appendChild(dlStyleEl);          } else {            dlStyleEl.innerHTML = landscape;          }        },500);      }        // 延时,让浏览器处理完viewport造成的影响,然后再计算root font-size。      setTimeout(function(){        refreshRem(designWidth, rem2px);      }, 1);      })(640, 100);</code></pre>    <p>此方案分为上下两部分。</p>    <p>第一部分为通过设置 viewport ,将物理像素和css中的像素对应起来。iOS下,对于2和3的屏,正常按dpr实际值处理,其余的用1倍方案。</p>    <ol>     <li>在 dpr = 1 的设备上设置:</li>    </ol>    <pre>  <code class="language-javascript"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /></code></pre>    <p>如 Galaxy S5 中,设置前获取屏宽 window.innerWidth 为 360 ,设置后还是 360 。</p>    <ol>     <li>在 dpr = 2 的设备上:</li>    </ol>    <pre>  <code class="language-javascript"><meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" /></code></pre>    <p>如 iPhone6 中,设置前获取屏宽 window.innerWidth 为 375 ,设置后是 750 (与物理像素匹配)。</p>    <ol>     <li>在 dpr = 3 的设备上:</li>    </ol>    <pre>  <code class="language-javascript"><meta name="viewport" content="width=device-width, initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no" /></code></pre>    <p>如 iPhone6 Plus 中,设置前获取屏宽 window.innerWidth 为 414 ,设置后是 1242 (与物理像素匹配)。</p>    <p>同时在html标签上设置 「data-dpr」属性,标注当前设备的dpr值,为后面做图片高清适配做准备。</p>    <p>第二部分为设置了 viewport 后,获取新的屏幕高宽,然后按照等比缩放原则,考虑系统字体大小的影响(前一篇中解决的问题),计算出我们需要的 root font size。</p>    <p>注意一定是要在设置的 viewport 生效后,再进行计算,不然获取到的屏幕高宽不准确。所以在这里使用了两个延时来保证这一点。</p>    <p>第一个延时,让浏览器处理完修改 viewport 造成的影响,然后再计算root font-size。</p>    <pre>  <code class="language-javascript">setTimeout(function(){    refreshRem(designWidth, rem2px);  }, 1);</code></pre>    <p>第二个延时,由于 height 对 viewport 的更改响应速度比较慢,所以在加个延时处理横屏的情况。</p>    <pre>  <code class="language-javascript">setTimeout(function(){    var height = docEl.getBoundingClientRect().height;    ...  });</code></pre>    <p>另外,最好将上面的代码用内联的方式,直接放置到页面的 head 里面,由于js处理会阻塞页面渲染(因为宽度对 viewport 的更改相应很快,所以不必担心上面的代码占用太长的时间),利用这一点,可以保证后面的页面渲染的时候不会闪烁。</p>    <p>这样在css中你就可以放心的使用 1px 来设置 1像素的边框了。而高清图片的适配,就需要使用下面的代码</p>    <pre>  <code class="language-javascript">.pic {    width:1rem;    height:1rem;    background: url(../images/100_100.png);    background-repeat: no-repeat;    background-size: cover;  }  [data-dpr="2"] .pic {    background-image: url("../images/100_100@2x.png");  }  [data-dpr="3"] .pic {    background-image: url("../images/100_100@3x.png");  }</code></pre>    <p>这时候使用 less 或 sass 就很方便了</p>    <p>只给出了替换 .png 的示例。</p>    <p><strong>less:</strong></p>    <pre>  <code class="language-javascript">.dpr(@selector, @img) {    [data-dpr="2"] {      @_img : replace("@{img}", '\.png$' ,'@2x.png');      @{selector} {        background-image: url("@{_img}");      }    }    [data-dpr="3"] {      @_img : replace("@{img}", '\.png$' ,'@3x.png');      @{selector} {        background-image: url("@{_img}");      }    }  }  .pic {    width:1rem;    height:1rem;    background: url(../images/100_100.png);    background-repeat: no-repeat;    background-size: cover;  }  // 这里要加使用 ~".pic",   // 不然生成的 selector 会是带有引号的 [data-dpr="2"] ".pic"  // 而不是 [data-dpr="2"] .pic  .dpr(~".pic", "../images/100_100.png");</code></pre>    <p><strong>sass:</strong></p>    <pre>  <code class="language-javascript">@function str-replace($string, $search, $replace: '') {    $index: str-index($string, $search);      @if $index {      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);    }      @return $string;  }    @mixin dpr($selector, $img) {    [data-dpr="2"] {      $_img : str-replace("#{$img}", '\.png' ,'@2x.png');      #{$selector} {        background-image: url("#{$_img}");      }    }    [data-dpr="3"] {      $_img : str-replace("#{$img}", '\.png' ,'@3x.png');      #{$selector} {        background-image: url("#{$_img}");      }    }  }  .pic {    width:1rem;    height:1rem;    background: url(../images/100_100.png);    background-repeat: no-repeat;    background-size: cover;  }    @include dpr($selector:".pic", $img:"../images/100_100.png")</code></pre>    <p>另外附赠一个webp特性检查,也可以一起放到上面的立即执行函数中,同时更新一下 less 或 sass ,就可以很方便使用webp了。</p>    <p><strong>js</strong></p>    <pre>  <code class="language-javascript">// 监测webp支持情况,如果支持为html标签添加属性:data-webp=1  (function() {    var webp = new Image();    webp.onload = webp.onerror = function() {      webp.height === 2 && document.documentElement.setAttribute('data-webp', 1);      webp.onload = webp.onerror = null;      webp = null;    };    webp.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';  })();</code></pre>    <p><strong>less</strong></p>    <pre>  <code class="language-javascript">.dpr-webp(@selector, @img) {    [data-dpr="2"] {      @_img : replace("@{img}", '\.png$' ,'@2x.png');      @{selector} {        background-image: url("@{_img}");      }    }    [data-dpr="3"] {      @_img : replace("@{img}", '\.png$' ,'@3x.png');      @{selector} {        background-image: url("@{_img}");      }    }    [data-webp="1"] {      @_img : replace("@{img}", '\.png$' ,'.webp');      @{selector} {        background-image: url("@{_img}");      }    }      [data-webp="1"][data-dpr="2"] {      @_img : replace("@{img}", '\.png$' ,'@2x.webp');      @{selector} {        background-image: url("@{_img}");      }    }      [data-webp="1"][data-dpr="3"] {      @_img : replace("@{img}", '\.png$' ,'@3x.webp');      @{selector} {        background-image: url("@{_img}");      }    }  }</code></pre>    <p><strong>sass</strong></p>    <pre>  <code class="language-javascript">@function str-replace($string, $search, $replace: '') {    $index: str-index($string, $search);      @if $index {      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);    }      @return $string;  }    @mixin dpr-webp($selector, $img) {    [data-dpr="2"] {      $_img : str-replace("#{$img}", '\.png' ,'@2x.png');      #{$selector} {        background-image: url("#{$_img}");      }    }    [data-dpr="3"] {      $_img : str-replace("#{$img}", '\.png' ,'@3x.png');      #{$selector} {        background-image: url("#{$_img}");      }    }    [data-webp="1"] {      $_img : str-replace("#{$img}", '\.png' ,'.webp');      #{$selector} {        background-image: url("#{$_img}");      }    }      [data-webp="1"][data-dpr="2"] {      $_img : str-replace("#{$img}", '\.png' ,'@2x.webp');      #{$selector} {        background-image: url("#{$_img}");      }    }      [data-webp="1"][data-dpr="3"] {      $_img : str-replace("#{$img}", '\.png' ,'@3x.webp');      #{$selector} {        background-image: url("#{$_img}");      }    }  }</code></pre>    <p>结语由于要处理『高清适配』同时兼容Android在font size的bug,所以过程有些绕。另外,不直接使用 lib-flexible 是有两点,一方面不习惯它的类vw的尺寸书写方式(与1vw对应屏宽类似,使用10rem对应屏宽,开发时需要使用插件将测量值换算为目标值),另一方面它也没去解决Android的font size的bug。</p>    <p> </p>    <p> </p>    <p>来自:https://github.com/hbxeagle/rem/blob/master/HD_ADAPTER.md</p>    <p> </p>    
 本文由用户 mom213 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1481772840530.html
CSS 前端技术 webP