移动端适配viewport

一、移动端适配基本概念
viewport 即视口
visual viewport 透过屏幕的可视区域 window.innerWidth
layout viewport 渲染页面的虚拟窗口

document.documentElement.clientWidth document.documentElement.clientHeight

二、viewport适配的核心概念

1. 固定的layout viewport, -scale整体缩放
   例如对于分辨率为360像素的安卓设备，meta的view port 如下

<meta name="viewport" content="width=750,minimum-scale="0.48,maximum="0.48">

1. 动态的layout viewport大小，内容布局自适应

<meta name="viewport" content="width=device-width,inital-scale=1.0,user-scalable=0">

三、平台类页面的适配（针对的是dom元素的适配）

1. 荔枝FM:viewport固定大小，脚本设置动态缩放比例，布局字体等大小基本使用px单位

'<meta name="viewport" content="width=640,minimum-scale='+phoneScale+',maximum='+phoneScale+', target-densitydpi=device-dpi">'

缺点：无法满足大屏多字需求
2. 豆瓣：viewport动态大小，适配为设备屏幕可视区域

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,inital-scale=1.0,minimum=1.0,maximum=1.0">

利用百分比单位、px单位等混合实现流式布局
缺点：无法满足特殊场景需求

1. 网易：viewport动态大小，适配为设备屏幕可视区域
   基本统一使用rem单位，实现弹性布局

2. 手淘：根据dpr动态缩放viewport大小，实现一物理像素线
   缺点：脚本内联，导致css,js耦合。

scale=1/dpr
metaEl.setAttibute('content','initial-scale'+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no')

字体基本用px,布局大小用rem单位

四、基于viewport units(视口单位)的适配方案(相对于layout viewport)

1.概念
1vw: 视口宽度的1%大小
1vh：视口高度的1%大小
1vmax: 1vw和1vh中的最大值
1vmin: 1vw和1vh中的最小值
竖屏：100vw 100vmax
横屏: 100vw 100vmin
2.方案：视口单位+rem单位

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,shrink-to-fit=no">

对根元素的字体大小用vw单位

html{
    font-size:20px;
    font-size:375/20*100vw;
    @media screen and (max-width:320px){
       font-size:375/20*320px;
    }
    @media screen and (min-width:540px){
      font-size:375/20*540px;
    }
}

对横向全屏适配时，用vh单位

@media screen and (orientation:landscape){
    html{
        font-size:20px;
            font-size:375/20*100vh;
    }
}

rem单位根据基值进行计算

@function rem($val){
    @return $val/20;
}

1物理像素利用伪元素+border+scale属性实现

border:1px solid #ddd
top:0;bottom:0;left:0;right:0;
background:none;
border-color:$borderColor;
media only screen and (-webkit-min-device-pixel-ratio:2){
    &{
        right:-100%;
        bottom:-100%;
        -webkit-transform:scale(0.5);
        -webkit-transform-origin:0% 0%;
    }

}

3.特色：视口单位+rem单位

以视口单位根元素大小单位，页面构建继续沿用rem单位方案

js css解耦、无缝切换继续使用rem构建、全面兼顾横屏适配、优雅降级利用px

五、营销类页面适配（sns游戏页面，针对canvas横屏适配）

1.核心思想：缩放》css3 transform 将canvas舞台缩放至适合的窗口大小来做横屏适配
2. 5种缩放适配模式
2.1 contain:舞台内容需要全屏展示，背景可用背景色铺满留空
2.2 cover:舞台主体内容居中，四周可以被裁减的游戏场景
2.3 fill：被拉伸变形不明显的游戏场景
2.4 fixed width：背景色铺满留空、又可被裁减
2.5 fixed height：横向延伸
3. 2种策略
3.1 重绘制：对应留白的情况，对重新绘制大小的元素进行处理
3.2 重定位：对应裁剪的情况，对于那些不希望被裁剪的贴边元素进行处理