本文主要是介绍移动端适配viewport,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、移动端适配基本概念
viewport 即视口
visual viewport 透过屏幕的可视区域 window.innerWidth
layout viewport 渲染页面的虚拟窗口
document.documentElement.clientWidth document.documentElement.clientHeight
二、viewport适配的核心概念
- 固定的layout viewport, -scale整体缩放
例如对于分辨率为360像素的安卓设备,meta的view port 如下
<meta name="viewport" content="width=750,minimum-scale="0.48,maximum="0.48">
- 动态的layout viewport大小,内容布局自适应
<meta name="viewport" content="width=device-width,inital-scale=1.0,user-scalable=0">
三、平台类页面的适配(针对的是dom元素的适配)
- 荔枝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单位等混合实现流式布局
缺点:无法满足特殊场景需求
网易:viewport动态大小,适配为设备屏幕可视区域
基本统一使用rem单位,实现弹性布局手淘:根据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 重定位:对应裁剪的情况,对于那些不希望被裁剪的贴边元素进行处理
这篇关于移动端适配viewport的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!