H5项目怎么兼容移动端？相信这是个每个前端开发者都会经常百度的问题，随着前端技术的不断更新换代，现在每个公司随随便便都会让你搞一个H5项目出来，那么问题就来了，不管你怎么的小心翼翼，等到测试的时候总会出一些个意想不到的小Bug，每每碰到这些个问题总是让人痛不欲生（脑子里不经浮现我是谁？我在哪？我要做什么？）
所以我就在这总结了一些经常出现的问题，希望能够帮助到你！
话不多说，翠花，上干货啦！
1.屏幕适配方案
说到h5页面，第一个想到的就是适配问题，当然目前用的最多的就是rem,那么他的原理是什么呢？简单来说，rem是相对于HTML根元素为基准的相对单位。比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px；
假设我们将屏幕平局分为10份，每一份宽度用一个a表示，即a=屏幕宽度/10;那么：
div{width: 5a} /* 屏幕宽度的50%
但是css中没有a这个单位啊？那怎么办呢？对，css不是有相对单位rem么？我们全可以实现借助rem代替上面的a。如：
html {font-size: 12px}
div {width: 2rem} /* 24px*/
html {font-size: 16px}
div {width: 2rem} /* 32px
那么问题来了？怎么让html元素字体大小恒等于屏幕的1/10呢？如ipone6宽是375px,font-size:37.5px;
html {fons-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕宽度的50%
我们用js很容易动态的设置html的font-size恒等屏幕的1/10;
(function (doc, win, image_width) {
var docEl = doc.documentElement, //获取html标签
//orientationchange方向改变事件
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//当前设备视口宽度
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / image_width) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, //图是多少的，这就写多少，比如750);
那么现在应该就会有小伙伴要问了，字体的font-size也可以用rem吗？如果你非要用的话那谁也拦不住你，但是呢其实在移动端字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小？
我们可以在body上做字体修正，比如把body字体大小设置为16px，但如果用户自己设置了更大的字体，此时用户的设置将失效，比如合理的方式是，将其设置为用户的默认字体大小:
那么如果屏幕尺寸切换了字体怎么办呢？我们可以换种方法来实现
适配问题解决了，那么我们就该聊一聊弹性盒布局了，display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。
1.关于display:flex;
对于PC端，一般chrome（测试版本：49.0.2623.110 m）和火狐（测试版本：49.0.2）都能很好地支持。ie不支持。
对于移动端：
（1）iOS的原生safari浏览器是支持的；UC浏览器支持的很好；微信浏览器不支持
（2）安卓的原生浏览器不支持，UC浏览器不支持，微信浏览器不支持
2.关于display:box;
PC端：chrome（测试版本：49.0.2623.110 m）和火狐（测试版本：49.0.2）都能很好地支持。ie不支持。
移动端：
（1）iOS的原生safari浏览器是支持的；UC浏览器支持的很好
（2）安卓的原生浏览器支持；UC浏览器不支持
总的来说，不考虑IE浏览器的话，PC端上使用哪个都可以，一般使用display:flex；iOS的UCdisplay:box和display:flex两个都支持。
通常要做到兼容，写法是下面这样：
本来觉着好像没多少东西，但是一写下来就感觉有好多，不是一时半会能写完的，后续再慢慢更新吧，今天就写到这里了！希望能够对你有一点点的帮助
网友评论