前言：在做H5的过程中遇到了许多问题，特意的记录一下。方便查阅
目录
1.移动端的的适配
2.移动端软键盘弹起
3.视频自动播放
4.移动端屏幕旋转
5.结语
一、移动端的的适配
问题
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，又需要页面在不同的手机保持设计图的效果。
- html中的 viewport 设置
- javaScript 动态计算rem 并设置根 的font-size
移动端有三个不同的视口概念：
1. 布局视口（layout viewport）：在css中布局的区域
2. 视觉视口（visual viewport）：手机屏幕的大小
3. 理想视口（ideal viewport）：设计图上的大小
css像素与设备像素“田字图解”
使用 meta 标签控制他们之间的比例与大小。
<meta name="viewport" content="width=device-width, initial-scale=1">
这是关于 meta 标签的一些属性，可以通过这些属性来改视口；
| 属性 | 属性值 | 描述 |
|---|---|---|
| width | 数值 / device-width | 视口宽度 |
| height | 数值 / device-height | 视口高度 |
| initial-scale | 0.0 ~ 10.0 | 设备宽度与视口大小之间的缩放比率 |
| maximum-scale | 0.0 ~ 10.0 | 缩放最大值 |
| user-scalable | 布尔值 | 默认yes，为no时用户不能缩放网页 |
其中 width=device-width 是让当前的viewport的宽度等于设备的宽度，屏幕缩放比例为1。
使用rem，对页面进行自适应布局。js监听页面的大小的改变，并动态的设置根元素的font-size
(function (doc, win) {
var width = 750; // 设计的宽度
var height = 1600; // 设计的高度
var rootValue = 100; // 以一百为基准来计算
// 触发事件
var rszEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var reCalc = (function () {
var reCalc = function () {
var docEl = doc.documentElement;
var winWidth = docEl.clientWidth;
var winHeight = docEl.clientHeight;
if (!winWidth) return;
var fontSize;
if (winWidth < winHeight) {
if ((winWidth / winHeight) > (height / width)) {
// 以高度为基准
fontSize = (rootValue * (winHeight / height));
} else {
// 以宽度为基准
fontSize = (rootValue * (winWidth / width));
}
} else {
if ((winWidth / winHeight) > (height / width)) {
fontSize = (rootValue * (winWidth / height));
} else {
fontSize = (rootValue * (winHeight / width));
}
}
// 字体最大不超过 110
docEl.style.fontSize = (fontSize > 110 ? 110 : fontSize) + 'px';
return reCalc;
};
return reCalc();
})();
reCalc();
setTimeout(function () {
reCalc();
}, 300);
win.addEventListener('load', reCalc, false);
win.addEventListener(rszEvt, reCalc, false);
if (!doc.addEventListener) return;
doc.addEventListener('DOMContentLoaded', reCalc, false);
})(document, window);
二、移动端软键盘弹起
问题：
在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，事件不同。在IOS 上，输入框获取焦点，键盘起，
页面（webview）整体往上滚动，当键盘收起后，不回到原位。并且在点击软键盘的收起的时候 软键盘的input不会失去焦点。
var viewHeight = window.innerHeight;
$(window).resize(function () {
var thisHeight = $(this).innerHeight();
if (viewHeight - thisHeight > 50) {
//窗口发生改变(大),故此时键盘弹出
$().css()
} else {
//窗口发生改变(小),故此时键盘收起
$().css()
}
});
这种方法的思路是通过页面高度的变化来判断是否有键盘弹出，借用了jquery中的resize函数，界面尺寸改变时触发。
三、视频自动播放
问题：
在移动端，为了避免浪费流量。自动播放几乎被禁止。需要用户手动触发。视频跳到某一时间点，跳帧不准确。
// 在页面中加入一个按钮，强制用户点击
// 用户进行页面交互后进行视频播放
btn.ontouchstart = function () {
video.play();
}
对于视频跳转位置不准，是因为在手机上视频的跳转会自动跳转到最近到视频关键帧去，如果视频到关键帧在3.5s处，
当你设置video.currentTime=2.5时，视频就会跳到3.5s的位置；解决办法就是合理设置帧间隔或者插入相同帧来延长时间点。
四、移动端屏幕旋转
问题：
当页面是横屏显示时，用户竖屏打开时，而且没开启手机里的横屏模式，还要逼用户去开启。这样就会降低体验；
横屏旋转后canvas当位置会有混乱；
1. css媒体查询来控制样式
/*竖屏时使用的样式*/
@media all and (orientation:portrait) {
.css{}
}
/*横屏时使用的样式*/
@media all and (orientation:landscape) {
.css{}
2. 使用js监听页面事件，来修改横竖屏后的状态
//监听页面事件
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
// 因为时间触发后，马上获取高宽会得到错误的数据，所以加一个setTimeout
setTimeout(() => {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$wrap = $('#wrap');
// 横屏
if( width > height ){
$wrap.width(width);
$wrap.height(height);
$wrap.css('top', 0 );
$wrap.css('left', 0 );
$wrap.css('transform' , 'none');
$wrap.css('transform-origin' , '50% 50%');
}
// 竖屏
else{
$wrap.width(height);
$wrap.height(width);
$wrap.css('top', (height-width)/2 );
$wrap.css('left', 0-(height-width)/2 );
$wrap.css('transform' , 'rotate(90deg)');
$wrap.css('transform-origin' , '50% 50%');
}
}, 1000);
}, false);
这里改变最外层当盒子，在屏幕旋转时，设置rotate正（负）90度；而且如果用户切到横屏时，需要把rotate复原；
打完收工。
五、结语
这里就是记录的一些关于移动端的坑，对移动端只是初涉还有很多知识未有涉猎到。对于这些坑，也是踩过一次印象才会更加深刻。让自己不是在去踩坑的路上就是在坑中。
相关连接
了解更多
原文链接：年少时H5的踩坑日记
微信搜索公众号: DigitMagic魔数实验室
