移动端适配方案

时间  2021-08-14
标签 css html 前端 android git github web segmentfault 浏览器 sass 栏目 无线 繁體版
原文   原文链接
  • 移动端适配方案：
    1）viewport（scale=1/dpr）
    2）rem
    3）flex
    4）vm/vh
    1、什么是移动端适配
  • 移动端Web页面，即常说的H5页面、手机页面、webview页面；
  • 手机设备屏幕尺寸不一，作移动端的Web页面，须要考虑安卓/IOS的各类尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样作能更好地适配不一样屏幕宽度的移动设备；
  • 目的：在不一样尺寸的手机设备上，页面“相对性的达到合理的展现（自适应）”或者“保持统一效果的等比缩放（看起来差很少）”；

2、viewport视口css

浏览器可见视口和布局视口html

 

  • visual viewport：可见视口，即屏幕宽度；
  • layout viewport：布局视口，即DOM宽度；
  • idea viewport：理想适口，使布局视口就是可见视口；
  • 设备宽度（visual viewport）与DOM宽度（layout viewport），scale的关系是：
    （visual viewport）= （layout viewport）* scale
  • 获取屏幕宽度（visual viewport）的尺寸：window. innerWidth/Height
  • 获取DOM宽度（layout viewport）的尺寸：document. documentElement. clientWidth/Height
  • 完美适配：首先不须要用户缩放和横向滚动条就能正常的查看网站的全部内容；第二，显示的文字的大小合适，好比一段14px大小的文字，不会由于在一个高密度像素的屏幕里显示得过小而没法看清，理想的状况是这段14px的文字不管是在何种密度屏幕，何种分辨率下，显示出来的大小都是差很少的。固然，不仅是文字，其余元素像图片什么的也是这个道理，ppk把这个viewport叫作 ideal viewport，也就是第三个viewport——移动设备的理想viewport；
  • 移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，咱们须要的是ideal viewport。那么怎么才能获得ideal viewport呢？这就该轮到meta标签出场了；meta标签的做用是让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。也许允不容许用户缩放不一样的网站有不一样的要求，但让viewport的宽度等于设备的宽度，这个应该是你们都想要的效果，若是你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条；
    这个name为viewport的meta标签到底有哪些东西呢，又都有什么做用呢？

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证实这个东西仍是很是有用的。前端

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，以下：
width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"；
initial-scale：设置页面的初始缩放值，为一个数字，能够带小数；
minimum-scale：容许用户的最小缩放值，为一个数字，能够带小数；
maximum-scale：容许用户的最大缩放值，为一个数字，能够带小数；
height：设置layout viewport 的高度，这个属性对咱们并不重要，不多使用；
user-scalable：是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许；android

  • 设置理想视口：把默认的layout viewport的宽度设为移动设备的屏幕宽度，获得理想视口（ideal viewport）：

 

<meta name="viewport" content="width=device-width,initial-scale=1">

参考：移动前端开发之viewport的深刻理解git

3、物理像素(physical pixel)github

  • 物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件，每一个像素能够根据操做系统设置本身的颜色和亮度，所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的倒是4个物理像素，关于这个概念，看一张“田”字示意图就会清晰了；

4、CSS像素web

  • CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确度量WEB页面上的内容，通常状况下，CSS像素称为与设备无关的像素（device-independent pixel），简称DIPs，CSS像素顾名思义就是咱们写CSS时所用的像素；

做为Web开发者，咱们接触的更多的是用于控制元素样式的样式单位像素。这里的像素咱们称之为CSS像素
参考：CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport #21
5、设备像素比segmentfault

  • 设备像素比dpr(device pixel ratio)：设备像素比简称dpr，其定义了物理像素和设备独立像素的对应关系，它的值能够按下面的公式计算获得：
  • 设备像素比=物理像素/设备独立像素
  • Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素至关于2个物理像素，一般所说的二倍屏（Retina）的dpr是2，三倍屏是3；
  • viewport中的scale和dpr是倒数关系：

 

// 获取当前设备的dpr：
JavaScript: window.devicePixelRatio。
CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio。不一样dpr的设备，可根据此作一些样式适配(这里只针对webkit内核的浏览器和webview)。

6、设备独立像素dip与设备像素dp浏览器

  • 设备独立像素dip(device independent pixels)：与屏幕密度有关，dip能够用来辅助区分视网膜设备仍是非视网膜设备；
  • 设备像素dp(device pixels)
  • 安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不一样的等级，规定以160dpi为基准，1dp=1px；若是密度为320dpi，则1dp=2px，以此类推；
  • IOS设备：从iphone4开始Retina屏；
  • CSS像素与设备独立像素之间的关系依赖于当前的缩放等级；

7、屏幕像素密度PPI(pixel per inch)sass

  • 屏幕像素密度是指一个设备表面上存在的像素数量，它一般以每英寸有多少像素来计算（PPI），屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小；
  • 屏幕密度=对角线分辨率/屏幕尺寸

8、概念关系图

 

屏幕尺寸、屏幕分辨率-->对角线分辨率/屏幕尺寸-->屏幕像素密度PPI
                                             |
              设备像素比dpr = 物理像素 / 设备独立像素dip(dp)
                                             |
                                       viewport: scale
                                             |
                                          CSS像素px

CSS像素与设备像素“田字图解”

9、前端实现相关方式

  • viewport 设置理想视口

 

// 设置理想视口，使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)同样大，DOM文档主宽度即为屏幕宽度，1个CSS像素（1px）由多少设备像素显示由具体设备而不一样；
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

10、动态设置视口缩放为1/dpr

  • 对于安卓，全部设备缩放设为1，对于IOS，根据dpr不一样，设置其缩放为dpr倒数，设置页面缩放可使得1个CSS像素(1px)由1个设备像素来显示，从而提升显示精度；所以，设置1/dpr的缩放视口，能够画出1px的边框；
  • 无论页面中有没有设置viewport，若无，则设置；如有，则改写，设置其scale为1/dpr；

 

(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var dpr = 0;
  var scale = 0;

  // 对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/[iphone|ipad]/gi);
    var devicePixelRatio = win.devicePixelRatio;

    if(isIPhone) {
      dpr = devicePixelRatio;
    } else {
      drp = 1;
    }
    
    scale = 1 / dpr;
  }

  /**
    * ================================================
    *   设置data-dpr和viewport
    × ================================================
    */

  docEl.setAttribute('data-dpr', dpr);
  // 动态改写meta:viewport标签
  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');
    document.documentElement.firstElementChild.appendChild(metaEl);
  } else {
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  }

})(document, window);

11、px单位的适配
设置动态缩放视口后，在iphone6上，缩放为0.5，即CSS像素2px最终显示效果为1px，而在scale=1的设备，CSS像素1px显示效果为1px，为了达到显示效果一致，以px为单位的元素（好比字体大小），其样式应有适配不一样dpr的版本，所以，在动态设置viewport:scale的时候，同时在根元素上加上data-dpr=[dpr]，可是这种方式仍是不够，若是dpr为2，3以外的其余数值，px就没办法适配到，所以会选择用rem为单位进行适配；

 

.p {
    font-size: 14px;

  [data-dpr="2"] & {
    font-size: 14px * 2;
  }

  [data-dpr="3"] & {
    font-size: 14px * 3;
  }
}

 

// 为写样式方便，能够借助sass的mixin写代码片断：
// // 适配dpr的字体大小
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
      font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}
@mixin px-dpr($property, $px) {
  #{$property}: $px;

  [data-dpr="2"] & {
    #{$property}: $px * 2;
  }

  [data-dpr="3"] & {
    #{$property}: $px * 3;
  }
}

// 使用
@include font-dpr(14px);
@include px-dpr(width, 40px); @include px-dpr(height, 40px);

12、设置缩放视口与设置理想视口有什么不一样

  • 问题：viewport设为理想视口（scale=1）,基本上已经知足适配，为何要动态设置viewport缩放？
  • 缘由：iphone6为例，dpr=2，缩放设为0.5，则DOM宽度为750，缩放后显示恰好屏幕宽度为375，而总的CSS像素实际上是750，与设备像素一致，这样1px的CSS像素，占用的物理也是1；而viewport设置缩放为1的理想视口状况下，DOM宽度为375，显示也恰好是屏幕宽度，然而1px的CSS像素，占用的物理像素是2，这样说来，这样设置能够实现1px的线条在二倍屏的显示，由于：CSS像素与设备像素的关系依赖于屏幕缩放；
  • 验证：设备：iphone6
    在scale=0.5时，1px边框显示效果；
    在scale=1.0时，1px边框显示效果；
    在scale=0.5时，2px边框显示效果；
    经过对比后发现，在scale=0.5时，1px的线比scale=1.0要细，这也就解决了1px线条的显示问题；

十3、rem(一个css单位)

  • 定义：font size of the root element，这个单位的定义和em相似，不一样的是em是相对于父元素，而rem是相对于根元素，rem定义是根元素的font-size，以rem为单位，其数值与px的关系，需相对于根元素<html>的font-size计算，好比设置根元素font-size=16px，则表示1rem=16px；
  • 根据这个特色，能够根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不一样终端上以相对一致的视觉效果呈现；
  • 选取一个设备宽度做为基准，设置其根元素大小，其余设备根据此比例计算其根元素大小，好比使得iphone6根元素font-size=16px；
设备 设备大小 根元素font-size/px 宽度/rem
iPhone5/SE 320*568 js计算所得 --
iPhone6/7/8 375*667 16 23.4375
i6/7/8 Plus 414*736 js计算所得 --
iPhone x 375*812 js计算所得 --
iPad 768*1024 js计算所得 --
- 360 js计算所得 --
  • 根元素fontSize公式：width/fontSize = baseWidth/baseFontSize；
    其中，baseWidth, baseFontSize是选为基准的设备宽度及其根元素大小，width, fontSize为所求设备的宽度及其根元素大小；

十4、动态设置根元素fontSize

 

// 以320px的屏幕为基准
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

 

/**
  * 如下这段代码是用于根据移动端设备的屏幕分辨率计算出合适的根元素的大小
  * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 依次增大；
  * 限制当为设备宽度大于768(iPad)以后，font-size再也不继续增大
  * scale 为meta viewport中的缩放大小
  */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  /**
    * ================================================
    *   设置根元素font-size
    * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 
    × ================================================
    */
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);

十5、rem计算(px2rem)

  • 对于须要使用rem来适配不一样屏幕的元素，使用rem来做为CSS单位，为了方便，能够借助sass写一个函数计算px转化为rem，写样式时没必要一直手动计算；

 

/* 
 * 此处 $base-font-size 具体数值根据设计图尺寸而定
 * flexible中设置的标准是【fontSize=16px, when 屏幕宽度=375】，所以，按此标准进行计算，
 * 若设计图为iPhone6(375*667)的二倍稿，则$base-font-size=32px
 *
 */ 
@function px2rem($px, $base-font-size: 32px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

// 使用，eg:
font-size: px2rem(18px);

十6、问题思考

  • 我以前一直在想一个问题，选取哪一个设备来作基准、屏幕宽度等分为多少比较合适，设计图给多大宽度的版本？被选取做为基准的设备，应当就是前端须要设计提供的设计图版本，这样能够避免一些尺寸上的纠缠，而等分为多少等分，除了考虑方便设计，是否须要考虑其余问题？对于根元素font-size没有手动设置的状况，1rem究竟等于多少？

  • 了解到的一些事实：某些Android设备会丢掉 rem 小数部分（具体是哪些设备，搜到的文章中没有说），那么1rem对应的px少些，在这些安卓设备上显示偏差就会较小，固然若是不存在会丢掉小数这个问题，这一说也就没必要考虑了。
    未设置font-size状况下，1rem的大小具体看浏览器的实现，默认的根元素大小是font-size=16px

  • 目前通常会选取iPhone6做为基准，设计图便要iPhone6的二倍图
    当动态缩放视口为1/dpr, 计算所得的根元素fontSize也会跟着缩放，即若理想视口(scale=1), iPhone6根元素fontSize=16px; 若scale=0.5, iPhone6根元素fontSize=32px; 所以设置视口缩放应放于设置根元素fontSize以前；

十7、vm/vh:CSS单位

  • vw(view-width), vh(view-height) 这两个单位是CSS新增的单位，表示视区宽度/高度，视区总宽度为100vw, 总高度为100vh；
  • 视区指浏览器内部的可视区域大小：window.innerWidth/Height；

十8、一些问题

  • upsampling/downsampling
    DownSampling: 大图放入比图片尺寸小的容器中时，出现像素分割成就近色

  • 不一样scale显示同一图片基本无问题;同一sacle，不一样倍数图，存在色差(Downsampling)

十9、手淘的实现方案

经过一段JS代码根据设备的屏幕宽度、dpr设置根元素的data-dpr和font-size, 这段JS代码要在全部资源加载以前执行，建议作内联处理。

各类元素(文本、图片)处理方案参考：
图：怎样让你的网站适应视网膜分辨率

二10、px转rem的mixin

 

// 使用sass的混合宏
// 淘宝手淘的方案里，i6(375pt)屏幕宽度为10rem，即font-size=75px, scale=0.5 因设计图为二倍图，$base-font-size=75px
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;
    //Print the first line in pixel values
    @if $support-for-ie {
        #{$property}: $px-values;
    }
    //if there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number"{
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

二11、小结

  • 适配不一样屏幕宽度以及不一样dpr，经过动态设置viewport(scale=1/dpr) + 根元素fontSize + rem, 辅助使用vw/vh等来达到适合的显示；
  • 若无需适配可显示1px线条，也能够不动态设置scale，只使用动态设置根元素fontSize + rem + 理想视口；
  • 当视口缩放，计算所得的根元素fontSize也会跟着缩放，即若理想视口(scale=1), iPhone6根元素fontSize=16px; 若scale=0.5, iPhone6根元素fontSize=32px; 所以没必要担忧rem的计算；
  • !!css单位：之前我认为这样比较好：适配元素rem为单位，正文字体及边距宜用px为单位；如今认为所有用rem便可，包括字体大小，不用px；
  • px为单位的元素，需根据dpr有不一样的大小，如大小12px, dpr=2则采用24px, 使用sass mixin简化写法；
  • 配合scss函数，简化px2rem转换，且易于维护(若需修改$base-font-size, 无需手动从新计算全部rem单位)；
  • px2rem函数的base-font-size=32px，参数传值直接为设计图标注尺寸；
  • 使用iPhone6(375pt)二倍设计图:宽度750px；
  • 切图使用三倍精度图，以适应三倍屏（这个目前我尚未实际应用过）

二12、Retina视网膜屏
       Retina视网膜屏，是指人眼在正常观察距离（iPhone定义为10英寸，iPad定义为15英寸）下，视网膜已经没法分辨单个像素，再也不出现像素颗粒感，仅能观察到如丝般细腻的画面，能够理解为超高分辨率屏幕；

  • 这是一种显示技术，能够将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提升屏幕显示的细腻程度，这种分辨率在正常观看距离下足以令人肉眼没法分辨其中的单独像素。

最早使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。

对好比下两幅图，能够清晰地看出是否 Retina 屏的显示差别：

 

屏幕快照 2018-08-20 下午3.00.23.png

 

两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是同样的，从上图能够看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提升了，但它不一样于普通的电脑显示器那样为了显示更多的内容，而是提高显示相同内容时的画面精细程度。这种提高方式是靠提高单位面积屏幕的像素数量，即像素密度来提高分辨率，这样作的主要目的是为了提升屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例， 工做时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。

注意：在桌面显示器中，咱们调整了显示分辨率，好比从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。

二十3、相关连接

做者：puxiaotaoc 连接：https://www.jianshu.com/p/b13d811a6a76 来源：简书 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程