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
本文章属于本人和博客园所有,如有转载请注明出自http://www.cnblogs.com/xucheng
原文地址:https://www.cnblogs.com/xucheng/p/6541169.html