常用移动端开发技巧

一、常用meta标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

<meta content="yes" name="apple-mobile-web-app-capable">

safari私有meta标签，指定允许全屏模式浏览

<meta content="black" name="apple-mobile-web-app-status-bar-style">

safari私有meta标签，指定safari顶端的状态条的样式

<meta content="telephone=no" name="format-detection">

禁止将页面中的数字识别为电话号码

<meta content="email=no" name="format-detection" />

禁止Android自动识别页面中的邮件地址

二、常用css属性

-webkit-touch-callout:none;
// 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

-webkit-user-select:none;
// 禁止iOS用户选中文字,此属性不继承

-webkit-tap-highlight-color:transparent;
// 设置点击时的高亮颜色

-webkit-text-size-adjust:100%;

-webkit-appearance: none;
// 消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。

-webkit-overflow-scrolling:touch
// 控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。

二、常用html属性

<a href="tel:131445">131445</a> //电话功能
<a href="sms:131445">131445</a> //短信功能
<a href="mailto:131445@gmail.com">131445@gmail.com</a>//邮箱功能

未完待续。。。。