移动web(h5页面)适配

最近接触了h5页面，其实它跟pc也没有多大区别，主要是屏幕适配问题，其他基本上是一样的。

1.适配移动端的话，可以用rem单位，媒体查询，百分比布局等等，可以结合使用也可以单独使用。我做的两个项目不是很复杂，就用了rem单位，这基本也够用了。

1rem 等于 html的font-size. 所以我们动态获取到屏幕的宽度做些运算赋值给html的font-size, 再我们页面中所有css单位都用rem,这样就可以做到页面内容根据屏幕宽度变化而适应。代码如下：

//法一
//获取屏幕宽度
var htmlWidth = document.documentElement.clientWidth || documnet.body.clientWidth ;
//更新html font-size
var htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth/10 + 'px';

//法二
html {
 font-size: calc(100vw / 3.75);
}

一般是把屏幕宽度除于10作为font-size值的，当然这个是自定义的。

2.h5中ios设备，点击输入框，弹起软键盘后内容的区域会顶起，收起软件盘后 页面的点击事件很有可能会出现失效、点击区域错位等情况。解决办法：在输入框失去焦点事件处理程序中 执行一下 window.scrollTo(0, 0)， 就可以了。

3.pc网站想在手机上等比例缩放不变形

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

CSS：min-width:1280px;