最近刚接手一个新活手机H5页面（浏览器和微信打开），由于时间紧任务急，快速在上网也看了一些资料，先简单整理下实现过程、过程遇到的坑，及后来如何填的坑。毕竟是这方面的小白，可能存在些许误差，有机会会继续深度学习。
一.实现过程
1. 设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
使用js给meta标签赋值
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
2.确定手机端视觉稿大小
设计稿宽度/100，例如我接收到视觉稿大小是375px * 665px,这里求得的值就是3.75
3.使用js给html的font-size动态赋值，并监听resize，再次调用给HTML的font-size赋值的方法
document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
4.在scss文件中，定义方法将px转为rem
@function torem($px){//$px为需要转换的字号
@return $px / 100px * 1rem; //100px为根字体大小
}
5. 按照设计稿中标注的宽度和高度，使用torem方法设置元素的属性值
例如：
width:torem(24px);
height:torem(24px);
6. 页面中的文字大小不建议使用torem方式处理，可以结合css3媒介查询来设置元素的文字大小
二.踩过的坑
这个h5页面是用作宣传推广让用户注册，所以就是简单做的几屏介绍页面，中间内嵌了一个iframe注册页面，及最后的注册成功页面。 所以我就把它做成一个大长屏，通过判断用户上滑下滑来让屏幕滑动到对应的第n屏，在几屏最外层的容器上设置transform:translate()或者margin-top值,因为我貌似看到有说微信内置浏览器不一定对css3有很好的兼容性，所以我最终设置的是margin-top（要根据你的页面布局来）。
1.踩坑来了，在微信内置浏览中下滑与微信的默认动作冲突（针对android,ios没有），解决方式: 监听ontouchmove和ontouchend事件的元素的css中加上
touch-action: none;
说实话现在css真的是越来越强大了，开心~ 你说以后我就专注在css上有前途嘛？？？？？
2.iframe没办法响应手指的touch ,后来是在注册页面加的touch监听,使用html5的postMessage解决的跨域，跨窗口消息传递是向上还是向下滑动https://www.cnblogs.com/dolphinX/p/3464056.html
3.表单出现软键盘时布局错乱
www.cnblogs.com/hellolm/p/4… 暂时就想起这么多，纯粹小白上路，可能会有偏差，还望不喜勿喷，(^__^) 嘻嘻……。
