web移动端开发技巧

一、定制键盘行为

1. 搜索框设置type="search" 用一个form表单包围起来，在onsubmit 事件里面阻止默认行为；
2. 对于只输入数字的文本框，可以通过以下设置来实现键盘只显示数字，不显示其他字符。<input type="text" pattern="[0-9]*" />
3. 配置input节点的 autocapitalize 、autocorrect属性；autocapitalize="off 关闭首字符大写" autocorrect="off" 关闭英文单词的校验

二、流畅滚动的N条军规

1. body上加上 -webkit-overflow-scrolling:touch
2. IOS尽量使用局部滚动；
3. iOS引进 ScrollFix 避免出界；
4. Android下尽量使用全局滚动；
   
   1. 尽量不用overflow：auto；
   2. 使用min-height：100% 代替 height：100%；
5. 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>