web移动端开发技巧

一、定制键盘行为

  1. 搜索框设置type="search" 用一个form表单包围起来,在onsubmit 事件里面阻止默认行为;
  2. 对于只输入数字的文本框,可以通过以下设置来实现键盘只显示数字,不显示其他字符。
  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>

你可能感兴趣的:(html)