第一种没问题
第二种, 当 input 在键盘的下方, 会将整个 document 的高度增加, 直到控件高度超过键盘高度为止.
对于 android 将整个 document 向上推的情况, 对于绝对定位和 fixed 属性定位来说. 会存在一定的问题. 增加 document
并未增高 viewport 的位置, 所以, 如果使用 fixed 可能会出现, 元素跑到键盘下面. 但, 由于键盘是在整个浏览器上方的,
所以, 你也不可能覆盖掉键盘. 一般的解决办法就是, 监听输入的 focus 事件, 来动态 设置fixed 的位置.(不过好复杂).
软盘类型
针对于不同的输入,键盘上显示的类型实际上是不一样的, 一般兼容性比较好的是:数字/手机号. 可以设置为:
input[type=tel]
input[type=number]
软盘人工弹起
当用户没有触发 input 的 focus 事件. 而是开发者人工触发的, 这里就有两种不同的情况.
IOS
ios6 以前, 当控件触发了 focus 事件, 但, focus 不是用户触发的, 那么键盘是不会弹起的.
在 ios6 以后, 可以手动添加一个 autofocus 属性即可.
Android
只要不是用户触发的,都不能弹起.
键盘的收起
键盘的收起直接触发 js 的 blur 事件即可.
页面滚动
设计到页面滚动有两个事件, 一个是 scroll, 一个是 touchmove.
手机端为了解决性能问题, 当页面进行滚动时, js 进行的动态渲染是无效的, 即, 使用 js 改变页面上元素的位置,是无效
的. 知道页面滚动结束才行. 这种效果主要体现在 scroll 事件触发的机制上. 在 ios8 以下, 当页面滚动时, js 的渲染被暂停
了. 而,对于 Andriod 4.0 以上来说, scroll 触发都是连续滚动的.
如果你想设置局部滚动, 可以添加 -webkit-overflow-scrolling: touch css 属性.
flex 问题
由于历史原因, 想在 web 上实现 flex 的效果. 则需要注意他的兼容性, 因为 flex 有三个版本, 而且三个版本的支持性都不
一样.分别是:
display: box
display: flexbox
display: flex
由于 Android 使用的是 Webkit 开源内核, 我们需要给 flex 加上 webkit 前缀, 来兼容 低版本 Android.
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
目前的兼容性是:
old 使用的是 display: box;
tweener 使用的是 display: flexbox;