移动端WEB页面适配
前言
公司开发一个项目,把安卓和IOS原生开发的同事加了进来,参与h5页面开发。测试时,发现各种适配问题。UI设计的同事问我:你们是不是没有按设计稿来的?检查一看,通篇是px,我做的em适配完全没有用到。因此整理一下移动端WEB页面适配问题记于此。
在这里也要吐槽一下,现在的公司为了省钱,一个人干了几个人的活,有的人还是跨语言开发。难怪很多人吐槽现在的互联网APP没有精品。
实现适配移动端WEB页面的几种方式
通过js判断,动态加载css样式
根据适配的机型不同,动态加载css文件(function(win,doc){ var width = doc.documentElement.clientWidth; var link = doc.createElement('link'); if(wdth<=320){ link.href = 'min.css' }else if(320<width&&width<375){ link.href = 'b.css' } ..... })(window,document)
该方法可以做到匹配任何尺寸屏幕的手机和PC,但是需要每种尺寸的屏幕写一个css文件,使得开发工作量变大。
通过meta标签放大或缩小
根据meta标签,动态设置user-scalable,maximum-scale,minimum-scale的值<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
该方法计算复杂,不宜实现
通过css3媒体查询,显示不同的样式
css3支持媒体查询,可以根据 不同尺寸的屏幕显示不同的样式:@media screen and (max-width: 300px) { body { background-color:lightblue; } }
该方法不用维护多套css文件,灵活,但是每一个样式类有多个尺寸,不易更改
通篇使用em作为单位
em是相对父节点的css长度单位,例如:如果给一个div设置字体大小fontSize为20px,其子节点设置字体大小fontSize为0.5em,则子节点字体的实际大小为0.5*20px = 10px,即:1em = 20px;
rem是相对于根元素的css长度单位,例如:设置html的字体大小fontSize为20px,那么1rem = 20px使用em实现适配的三种方式:
第一种:
//css文件 html{ font-size:100%; } body{ font-size:1em; pading:0; margin:0; }
优点:纯css实现,简单,同一尺寸的手机显示完全一样;
缺点:手机尺寸不同,显示的可能不同
第二种://js文件 (function(doc, win) { doc.addEventListener('DOMContentLoaded', function() { var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth; doc.body.style.fontSize = (clientWidth / 375 * 16) + 'px' }, false) })(document, window)
优点:任何尺寸的屏幕都可以显示一样的UI效果
缺点:依赖js,而且要确保手机APP的WebView的宽度与手机屏宽一致第三种:
//css文件 body{ font-size: 16px; margin: 0; padding: 0; } @media screen and (max-width: 320px) { body{ font-size: 13.654px } } @media screen and(min-width: 321px) and (max-width: 375px) { body{ font-size: 16px } } ....
优点:css加媒体查询实现,可以实现与UI几乎一样的效果
缺点:必须知道所匹配的手机屏宽使用rem作为单位
rem实现适配的方式与em的后两种类似,只需将body标签换为html标签- 使用vm,vh作为单位
vh:浏览器的可视窗口(Viewport)的高度分为100份,即:100vh;
vw:浏览器的可视窗口(Viewport)的宽度分为100份,即:100vw;
使用vh,vw作为单位,也就适配所有机型
优点:不需要考虑手机屏幕大小问题
缺点:不同的字体会出现高度不同,兼容性问题