h5做移动应用开发部分技巧

1、使用多种分别率设备：利用viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

 

2、删除默认的苹果工具栏和菜单栏，如手机号自动加下划线：
<meta name="apple-mobile-web-app-capable" content="yes">
content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

 

3、控制苹果手机状态栏样式：<meta name="apple-mobile-web-app-status-bar-style" content="black">

 

4、当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。
-webkit-touch-callout 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
*{-webkit-touch-callout:none;}

 

5、CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等，也就是，让页面内容不可选，使更像原生应用：
*{-webkit-user-select:none;}

 

6、防止出现点击页面元素出现闪一下黑色的现象：
*{-webkit-tap-highlight-color:rgba(255,255,255,0)}

7、滑动更流畅

-webkit-overflow-scrolling: touch
overflow-scrolling: touch