前言：这里移动端主要指hybridapp中的H5页面。app中对页面样式和功能的需求会更精细一点。
1、适配：手机端的尺寸多样，3.5英寸的iPhone4应该是最小的，只要考虑兼容到iPhone4就可以了。（iPhone4的用户量现在也很少，有时只要兼容到iPhone5就可以了）
总结：
rem+媒体查询适配（rem基本可以适配大部分的移动端的适配，解决不了的使用媒体查询基本可以解决），重点熟练下媒体查询手机是用height还是device-height来查询的。有的手机，下面有一条黑色的手机按键，此时的device-height有没有包含这块高度。注：不同手机宽度基本没什么适配的，rem基本就解决了。主要是针对需要一屏显示的页面，高度差距太大，用rem基本没什么效果。
2、JS呼起和隐藏键盘（默认是需要用户点击输入框才能呼起）：智能机的键盘都是软键盘。应用中有呼起键盘和隐藏键盘的需求。
呼起键盘：进入搜索页,要求键盘拉起。主要聚焦到input框就可以。（安卓上没有问题，ios上无效）
this.$refs.input.focus()//在一个demo上安卓和ios都有效，但是正式项目中，ios中无效隐藏键盘：通过给input标签，设置readonly属性就可以使键盘收起来了。（安卓上没有问题，ios上无效）
this.$refs.input.blur()3、软键盘呼起引起的兼容性问题：
a、会使webview高度变小（这里就要求body最好设置一个最小的高度为没有键盘时的高度），并且fixed定位元素跟着键盘上移（安卓的问题）：
问题原因：
安卓手机：同一个手机，H5页面的视口高度在键盘拉起和隐藏时，不一样的。拉起时，键盘部分的高度变成原生的内容了，H5容器高度就变小了。（H5页面本身的高度是不变的）
一般情况这个都不影响，但是如果底部有fixed定位的话。键盘拉起时，会把这块内容也移上去的，需要做一个判断进行隐藏（这个隐藏必须是针对对安卓机，ios机上不能隐藏。ios上也隐藏了，键盘）。
ios手机：更不正常，键盘弹出不影响H5容器的大小变化的，即clientHeight的大小不变，但是却出现了滚动（如果clientHeight同步变小，可以理解为变成了一个小屏的容器。但是ios这样，只是把滚动条的范围变小了；
滚动条到底了，页面的底部在键盘的上了。键盘遮挡的部分也是属于clientHeight，这一部分的高度，凭空给H5页面了）。总结起来就，ios中键盘弹起，会给H5页面的高度增加了一个键盘的高度。
个人看法：键盘弹出，可以这样理解为h5的底板的大小就是webview的大小，包括键盘。底板上一张画布，画布高度可以被撑高，html、body等元素是固定在画布上的。浏览器中页面的滚动的跟着画布滚动的。
安卓上，画布的最小高度是底板不包括键盘的高度；ios上，画布的最小高度是低板的高度加上键盘的高度。（css无非操作画布的属性）
解决问题：
页面只能是一屏的：这个要考虑自适应。键盘呼起，webview的高度变小了。使用absolute定位，bottom设置，定位参考的元素高度不能受webview高度的影响（给body设置一个最小高度，开始就通过js获取）；或者使用top设置高度。
如果，要考虑所有手机中底部的按钮必须离底部相同的距离。这个可能就要使用js获取没有键盘时屏幕的高度。然后把定位参考元素高度设置为这个值。
页面可以滚动：这个比较简单，没有键盘时，页面高度已经大于容器的高度了。呼起键盘后还是滚动的。没有任何的问题。
b、软件盘唤起，在表单外滑动，软键盘不关闭，点击才会关闭（这点表现，两者是一样的，没有兼容性问题，记录下这个特性）。
c、软件盘的关闭方法，表单失去焦点/软件盘上的关闭按钮（这点表现，两者是一样的，没有兼容性问题，记录下这个特性）
d、点击软键盘上的关闭按钮、安卓手机不会触发表单的blur事件，ios可以。（安卓的问题）
需要软件盘关闭时执行代码，在安卓上就需要做兼容处理。（解决安卓的一些兼容性问题，必须要在软键盘关闭时执行。如键盘拉起时，会把底部fixed元素移上去的，需要做一个判断进行隐藏；关闭软键盘时，再显示）
e、软键盘唤起时fixed元素失效（ios的问题）：如下说明
a、顶部fixed元素，input框在顶部：点击这个input框，fixed虽然失效了，但是页面不会滚动。fiexd元素会滚动是因为软键盘的弹出，fixed失效了（或变成了absolute），只要input失去焦点时，立刻把键盘关闭，fixed元素就没有滚动的机会。
这样就可以解决fixed无效的问题了。
b、底部fixed元素，input框在底部：这个input输入框，点击这个输入框，页面都会向上滚动的。input框始终在键盘上面，键盘关闭，滚上去的页面也不会滚下来。
这个当表单失去焦点时（或触发键盘隐藏事件时），让页面滚动到之前的位置就可以解决：
5、解决页面，返回时重复的问题（重要，app中返回是经常会用到的，所以浏览器历史记录需要页面控制下。页面前进或回退时，url只是参数的改变，页面是不刷新的）
A（列表页）=》B（详情页，B中有跳到A页面的按钮）：列表A1=》B点击跳到A的按钮=》
列表A2=》B。这个时候回退时，B=》A=》B=>A会出现不断重复的问题
解决方案：使用vue路由的vm.$router.replace()方法跳转，或原生的location.replace(URL)
6、input中占位文字，无法上下居中对齐（应该是字体小于12px，引起的问题）。
7、ios监听软键盘确认按钮：会无效（那个确认按钮会变化为换行按钮，换行时，监听key=13是对的。变成确认时，监听不了key=13的这个键。【猜测可能同一个键，确认的键盘码不是13】）
（项目中是在搜索框右边加一个搜索按钮，不使用软键盘上的确认按钮）
原因（个人猜测）：移动端是支持12px以下的字体的。安卓上小于12px的字体，字体会溢出标签一点。亲测，如下图，设置了居中的样式，字体设置为10px，字体溢出他的包含标签sapn。即，
浏览器12px以下的字体以12px显示；移动端小于12px的字体，也可以正常显示，但是排版有点小问题（会上移）。
常规的居中方案都没有用的，使用scale可以近似解决，但是不够完美。目前没有其他的可行方法。或者使用媒体查询，小于12px的尺寸，就以12px显示。折腾了好久，找不到好的办法
9、ios上vue框架中返回keep-alive的页面(这个页面比较长，有滚动。滚到顶部，进入下一个页面)，会出现白屏（被什么东西遮挡住了）。手轻轻滑动下，遮挡层就消失了。
10、ios中h5页面输入框点击空白处不会失去焦点软键盘不会收起（重要）：
11、ios-H5中，不过页面的高度是多少(html,body设置为50px，只有一个input标签)，只要键盘弹出，页面就一定会滚动。通过上面的方法，input失去焦点马上隐藏键盘。这样活动的时候键盘隐藏，页面就不会滚动了。
但是，在input内部滑动，还是会带动页面滚动的，给input标签添加一个touchmove阻止默认事件。就完美了
12、禁止ios页面上下滚动回弹（橡皮筋效果）：没有橡皮筋效果，就不会出现fixed失效的问题。
解决方案1、使用inobounce.js插件（亲测有效）。但是整个页面都不能滑动了，有溢出的屏幕的元素也不能滑动的。
里面的方案1：【纯css实现】
目前测试这个方案还没有成功，后续会继续验证。
说明：通过阅读inobounce.js的源码（源码代码量很少），发现原理就是使用window代理屏幕上的touchmove事件(window.addEventListener)。判断当前触发的对象是非滚动区域，则阻止事件的默认行为；滚动区域，不阻止事件。
具体实现，插件中考虑的比较全面，比较复杂。直接使用插件是最方便的。
安卓和ios对软键盘关闭的行为是不一样的。安卓中软键盘关闭，webview高度变化（blur事件不一定触发）；ios中软键盘关闭，触发blur事件【或focusout】(webview高度没有变化)。
解决方案：移动端开发，body内的元素，最外层的标签要设置一个高度（一般是容器的高度100vh），溢出属性设置滚动。不要让body的高度超过100vh了，不然fixed的遮罩层上面滚动，下面的内容一会滚动。处理起来比较麻烦。
亲测问题：在fixed层上使用vue的@touchmove.prevent阻止默认事件，结果上下两层的滚动都禁止了；使用@touchmove.stop阻止冒泡事件，结果无效。
问题分析：
a、body的高度超过容器高度，body是比较特殊的标签。fixe层的touchmove事件，会导致body滚动。
b、非body的标签，如div标签是一个溢出滚动的标签，其内的一个标签作为fixed遮罩层，则遮罩层内的内容滚动，不会触发这个div标签的高度。（个人猜测，遮罩层虽然在div标签内，但是已经脱离标准文档流，事件上于div已经没有关系）
c、body是比较特殊的标签，fixed遮罩层内的touchmove还是会到body上的。
说明：测试测出这个bug，自己测试一直没复现出来。可能触发机制不是很准确。
在安卓的容器（webview）中，视频播放需要点击两次，即播放-暂停-播放，才能开始播放。（暂时没有找到解决方案）
注意：1、移动端1像素问题，和视口大小没有关系。css中的像素是逻辑像素。
2、最后展示到屏幕上的是物理像素实现的，即逻辑像素经过计算，转化为物理像素显示。
3、0.5px是有兼容性问题的，安卓手机会把0.5px处理成1px，显示还是比较粗的。
产生原因：在retina屏中，1个逻辑像素，可能需要2个或3个物理像素来显示。而px已经是css最小的逻辑像素单位，css中0.5像素会处理成0px。
所以无法实现1px的物理像素渲染。
【注意：css中的px，是渲染在布局视口上的。是布局视口无法正常处理0.5px，布局视口的1px是可以渲染出0.5px的物理像素的】
解决方法：
1、0.5px方案：可能手机厂商知道存在这个问题，所以现在有的手机已经可以实现0.5px渲染1px的物理像素了。
在IOS8+，苹果系列都已经支持0.5px了，可以借助媒体查询来处理。
2、最佳解决方案：transform:scaleY(0.5);【在一个方向缩小一半】
布局视口中的1px会被处理成0.5px对应的物理像素进行渲染。
总结：安卓和ios的兼容性，主要的问题，还是软件键盘引起的。所以两者关于软键盘的处理一定要让他们尽可能的保持一致。如下要做到一致：
a、输入框，聚焦时弹出软件盘。失去焦点时，隐藏软件盘（ios需要处理的）。
b、ios的橡皮筋效果一定要禁掉（使用inobounce插件）。
c、ios和安卓两者对软键盘关闭的判断的逻辑不同（软键盘关闭时，执行代码这个功能是一定会用到的）。现在的手机不是ios就是安卓手机，可以把这两段代码封装在一个方法里，变成一个软键盘关闭的事件（实际开发中，一般只是对一种情况做出处理）。
if(isIOS){//在ios中执行下面监听事件，捕获软键盘关闭事件。（isIOS通过获取navigator.userAgent就可以判断）window.addEventListener('focusin',()=>{//键盘弹出事件处理alert("iphone键盘弹出事件处理")});window.addEventListener('focusout',()=>{//键盘收起事件处理alert("iphone键盘收起事件处理")});}if(isAndroid){//在android中执行下面监听事件，捕获软键盘关闭事件constinnerHeight=window.innerHeight;window.addEventListener('resize',()=>{constnewInnerHeight=window.innerHeight;if(innerHeight>newInnerHeight){//键盘弹出事件处理alert("android键盘弹窗事件");}else{//键盘收起事件处理alert("android键盘收起事件处理")}});}感悟：1、如果不用输入框，基本没有什么兼容性问题。css的兼容性问题也基本没有，就几个默认样式的区别；没有软键盘，ios回弹效果也没什么影响，可以不做处理。
2、上面讲的安卓和ios上的兼容性问题，都是webview内核的兼容性问题。hybrid-app中SDK方法也会有兼容问题的，这种bug完全就是安卓和ios软件开发者没有(或无法)统一引起的。一般安卓和ios是不同的人开发的。
1、touch事件：
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发。
注意：使用touchend事件时，一定要考虑touchcancel事件。比如，语音功能。按下说话，突然弹出语音权限未开。这个时候手指拿开就不会触发touchend事件了，touch事件被打断了，屏幕上一直是touchstart的状态。