一、定制键盘行为
- 搜索框设置
type="search"
用一个form表单包围起来,在onsubmit 事件里面阻止默认行为; - 对于只输入数字的文本框,可以通过以下设置来实现键盘只显示数字,不显示其他字符。
<input type="text" pattern="[0-9]*" />
- 配置input节点的 autocapitalize 、autocorrect属性;
autocapitalize="off 关闭首字符大写"
autocorrect="off" 关闭英文单词的校验
二、流畅滚动的N条军规
- body上加上
-webkit-overflow-scrolling:touch
- IOS尽量使用局部滚动;
- iOS引进 ScrollFix 避免出界;
- Android下尽量使用全局滚动;
- 尽量不用overflow:auto;
- 使用min-height:100% 代替 height:100%;
- iOS下带有滚动条且
position:absolute
的节点不要设置背景色
三、媒体查询常用样式表
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 竖放加载
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"> // 横放加载
// 竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
// 横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>