前言：这里移动端主要指 hybrid app 中的H5页面。app 中对页面 样式和功能 的需求会更精细一点。
1、适配： 手机端的尺寸多样，3.5英寸的 iPhone4应该是最小的，只要考虑兼容到iPhone4就可以了。（iPhone4的用户量现在也很少，有时只要兼容到iPhone5就可以了）
哪怕有比这个尺寸小的，都不是多人使用的。可能是个位数，甚至是没有。为数不多的几款这样的手机处理能力也很低下。 https://digi./a/0312/011872.htm#p=1
iPhone4 使用情况：iPhone4的系统， 现在的很多软件都运行不了。/shouji/iPhone/19249.html(系统升级后也会有问题，大部分用户是不会去升级的) 或https://t./articles/view/2972527830/b12d2cd60010084gl
总结：
rem + 媒体查询 适配（rem基本可以适配大部分的移动端的适配，解决不了的使用媒体查询基本可以解决），重点熟练下媒体查询手机是用height还是device-height来查询的。有的手机，下面有一条黑色的手机按键，此时的device-height有没有包含这块高度。
注：不同手机宽度基本没什么适配的，rem基本就解决了。主要是针对需要一屏显示的页面，高度差距太大，用rem基本没什么效果。
2、 JS 呼起和隐藏键盘（默认是需要用户点击输入框才能呼起）： 智能机的键盘都是软键盘。应用中有呼起键盘和隐藏键盘的需求。
呼起键盘：进入搜索页,要求键盘拉起。主要聚焦到input框就可以。（安卓上没有问题，ios上无效）
this.$refs.input.focus() // 在一个demo上安卓 和 ios都有效，但是正式项目中，ios中无效
隐藏键盘：通过给input标签，设置readonly 属性就可以使键盘收起来了。（安卓上没有问题，ios上无效）
<input type="text" ref="input" :readonly="readonly">
或，下面的方法 安卓 和 ios上都有效
this.$refs.input.blur()
3、软键盘呼起引起 webview高度变小 的问题（安卓的问题）：
问题原因：
安卓手机：同一个手机，H5页面的视口高度在键盘拉起和隐藏时，不一样的。拉起时，键盘部分的高度变成原生的内容了，H5容器高度就变小了。（H5页面本身的高度是不变的）
一般情况这个都不影响，但是如果底部有fixed定位的话。键盘拉起时，会把这块内容也移上去的，需要做一个判断进行隐藏。
ios手机：更不正常，键盘弹出不影响H5容器的大小变化的，即clientHeight的大小不变，但是却出现了滚动（如果clientHeight同步变小，可以理解为变成了一个小屏的容器。但是ios这样，只是把滚动条的范围变小了；
滚动条到底了，页面的底部在键盘的上了。键盘遮挡的部分也是属于clientHeight，这一部分的高度，凭空给H5页面了）。总结起来就，ios中键盘弹起，会给H5页面的高度增加了一个键盘的高度。
参考哪些高度发生的变化/weixin_34163553/article/details/88686238
个人看法：键盘弹出，可以这样理解为h5的底板的大小就是webview的大小，包括键盘。底板上一张画布，画布高度可以被撑高，html、body等元素是固定在画布上的。浏览器中页面的滚动的跟着画布滚动的。
安卓上，画布的最小高度是底板不包括键盘的高度； ios上，画布的最小高度是低板的高度加上键盘的高度。（css无非操作画布的属性）
解决问题：
页面只能是一屏的：这个要考虑自适应。键盘呼起，webview的高度变小了。使用 absolute 定位，bottom 设置，定位参考的元素高度不能受webview高度的影响；或者使用top设置高度。
如果，要考虑所有手机中 底部的按钮必须离底部相同的距离。这个可能就要使用js获取 没有键盘时屏幕的高度。然后把 定位参考 元素高度设置为这个值。
页面可以滚动：这个比较简单，只要页面的高度 大于 呼起键盘后 的高度。就没有任何的问题。
4、ios输入框，点击呼起键盘不敏感
5、fixed元素 软键盘唤起时fixed失效（fixed+input，ios的问题）：（有一个inobounce插件，可以直接解决这个问题。功能上相当于使得画布的高度，始终等于键盘上面到顶部的高度。不管键盘有没有出来都这样。有时间可以看下源码）
a、顶部 fixed元素，input框在顶部：点击这个input框，fixed虽然失效了，但是页面不会滚动。fiexd元素会滚动是因为软键盘的弹出，fixed失效了（或变成了absolute），只要input失去焦点时，立刻把键盘关闭，fixed元素就没有滚动的机会。
这样就可以解决fixed无效的问题了。
中间部分有滚动部分的解决方案，有效 /blog/570109268-2406086（解决了中间滚动部分的高度，不会引起画布的滚动。画布的滚动，还是会使fixed滚动，这个解决方法就是上面说的失去焦点，隐藏键盘）
b、底部 fixed元素，input框在底部：这个input输入框，点击这个输入框，页面都会向上滚动的。input框始终在键盘上面，键盘关闭，滚上去的页面也不会滚下来。有时间研究下解决方案
6、解决页面，返回时重复的问题 （重要，app中返回是经常会用到的，所以浏览器历史记录需要页面控制下。页面前进或回退时，url只是参数的改变，页面是不刷新的）
A（列表页） =》 B（详情页，B中有跳到A页面的按钮）：列表A1 =》 B 点击跳到A的按钮 =》
列表A2 =》B。这个时候回退时，B=》A=》B=>A 会出现不断重复的问题
解决方案：使用vue路由的vm.$router.replace()方法跳转，或 原生的location.replace(URL)
7、input中占位文字，无法上下居中对齐（应该是字体小于12px，引起的问题）。
8、ios监听软键盘确认按钮：会无效（那个确认按钮会变化 为换行按钮，换行时，监听key=13是对的。变成确认时，监听不了key=13的这个键。【猜测可能同一个键，确认的键盘码不是13】）
解决办法：type="search" 的输入控件，会使改变软键盘确认按钮的文字变成搜索（且键盘码都是13）。/sinat_24070543/article/details/53423274
<form action=""> // form 标签必须加<input v-model="wordName" type="search" placeholder="输入垃圾名称搜一搜" @input="inputText" ref="input"/></form>
这个方法可以不用监听key=13事件，直接监听form的 submit 事件同样可以监听 确认按钮。
（项目中是 在 搜索框 右边加一个 搜索按钮，不使用软键盘上的确认按钮）
另：type=search表单，输入文字后，右边会有一个删除文字按钮的。解决方案：/xiaoshen666/p/10772858.html
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;}
9、不同的手机系统，html的某些标签的默认样式是不一样的，开发要统一样式就需要自己写，而去掉默认的样式。（如，input [type="radio"] 单选框，alert，不同的系统中默认样式是不一样的）
10、小高度标签内单行文本 垂直居中 偏上的解决方案（安卓设备上）：/zhanghuanhuan1/article/details/80339610 或/liming911911/article/details/75389188（推荐）
原因（个人猜测）：移动端是支持12px以下的字体的。安卓上小于12px的字体，字体会溢出标签一点。亲测，如下图，字体设置为10px，字体溢出他的包含标签sapn。即，
浏览器12px以下的字体 以12px显示；移动端小于12px的字体，也可以正常显示，但是排版有点小问题（会上移）。
常规的居中方案都没有用的，使用scale可以近似解决，但是不够完美。目前没有其他的可行方法。或者使用媒体查询，小于12px的尺寸，就以12px显示。折腾了好久，找不到好的办法
11、ios上vue框架中返回keep-alive 的页面(这个页面比较长，有滚动。滚到顶部，进入下一个页面)，会出现白屏（被什么东西遮挡住了）。手轻轻滑动下，遮挡层就消失了。
原因及解决方法：/m0_38069630/article/details/80573283（公司的项目中因为是多人开发，不好动html, body的属性。所以没用这个解决方案，只是不用 keep-alive 了）
12、禁止ios浏览器页面滚动的橡皮筋效果(有回弹的效果)：/m0_37068028/article/details/80183781（亲测，两个方案都有效）
13、ios中 h5页面 输入框点击空白处不会失去焦点 软键盘不会收起（重要）：
解决方案：/gd-dql/p/7476330.html（亲测有效，里面使用touchend触发，改成touchstart更好。有时间整理下，把里面的定时去掉）
14、ios-H5 中，不过页面的高度是多少(html,body设置为50px，只有一个input标签)，只要键盘弹出，页面就一定会滚动 。通过上面的方法，input失去焦点马上隐藏键盘。这样活动的时候键盘隐藏，页面就不会滚动了。
但是，在input内部滑动，还是会带动页面滚动的，给input标签添加一个touchmove阻止默认事件。就完美了
document.getElementById('input').addEventListener("touchmove",function(event){event.preventDefault()},false)
（直接让页面不滚动，暂时没有找到解决方案，因为html，body的高度根本没有超出键盘的范围。我想应该是有直接的解决办法的，百度H5页面，不知道是怎么解决的，有时间研究下）
15、禁止 ios页面上下滚动回弹（橡皮筋效果）：没有橡皮筋效果，就不会出现fixed失效的问题。
解决方案、使用inobounce.js 插件（亲测有效）。但是 整个页面都不能滑动了，有溢出的屏幕的元素也不能滑动的。
如果有需要滑动的元素，需要设置一个height或max-height,还有overflow: auto; -webkit-overflow-scrolling: touch; /weixin_30610755/article/details/95260237
说明：通过阅读inobounce.js 的源码（源码代码量很少），发现 原理就是使用window代理屏幕上的 touchmove 事件( window.addEventListener)。判断当前触发的对象是非滚动区域，则阻止事件的默认行为；滚动区域，不阻止事件。
具体实现，插件中考虑的比较全面，比较复杂。直接使用插件是最方便的。
文章阅读
1、移动端项目实战心得： 参考链接
移动端事件：/p/18903985（原生的没有 tap 和 swipe 事件）
1、touch事件：
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发。
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件。（在浏览器的模拟器中触发touchcancel事件，Alt+Tab键）
注意：使用 touchend 事件时，一定要考虑touchcancel事件。比如，语音功能。按下说话，突然弹出 语音权限未开。这个时候手指拿开就不会触发touchend事件了，touch事件被打断了，屏幕上一直是touchstart的状态。
必须加上 touchcancel 事件，补充 手指拿开后的页面状态。
移动端各种高度：（在pc上，浏览的高度对用户基本什么问题。但是在移动端浏览的各种高度问题。比如webview的高度，是否包含软键盘，不同的系统有差异性。微信的H5页面，底部有左右前进按钮栏，webview的高度是否又包含这个）
参考：/a/1190000010443608或/p/27b68f780054?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
1、window.outerHeight：【不常用】窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。手机端，这个值和innerHeight一样。
2、window.innerHeight：【一般】浏览器窗口高度（包括横向滚动条的高度，没有横向滚动条，和documentElement.clientHeight是一样的。/suihang/p/11177093.html）。（ios中软键盘弹出时，有两个值）
3、body.offsetHeight：【不用】网页可见区域高（不确定具体的含义，值和scrollHeight一样。）。
4、body.clientHeight(兼容问题)：浏览器窗口高度（不包括横向滚动条）。（不同浏览器表达方式不一样，谷歌中他的值无效。使用documentElement.clientHeight【常用】）
5、body.scrollHeight(兼容问题)：网页正文全文高。可以理解为画布的高度。（谷歌中他的值表示body的高度，使用 documentElement.scrollHeight【常用】。/nanshanlaoyao/p/5964730.html）
6、body.scrollTop(兼容问题)：滚动条在Y轴上的滚动距离，即文档上边出去的高度。（谷歌、火狐上都为0，使用 documentElement.scrollTop【常用】。/p/4c37a2a56586）
兼容性解决方案：/winyh/p/6715010.html
7、window.screenTop：【不常用】窗口相对于屏幕的Y坐标。即浏览器顶部距离显示器顶部的距离。/jsref/prop-win-screenleft.html
8、screen.height：【不常用】屏幕分辨率的高，即显示器的高度。
9、screen.availHeight：【不常用】显示器除去底部任务栏后的高度。/jsref/prop_screen_availheight.asp
