IOS web app一些实用的属性设置

IOS对safari私有的属性很多，虽然很多不为人知但是却很实用。掌握好这些属性对webapp和混合app的开发会很有帮助。

1.format-detection[telephone=no]是否自动把电话号码转为链接

IOS针对HTML文档内的纯文字，会自动转换为电话号码链接，当点击时，会默认和系统的拨号相关联，但是开发者有时候并不想这样。

这时只要在head加上上面这段meta，就不会了。

2.viewport控制应用屏幕属性

viewport是一个针对移动web的meta标签，它的主要属性如下：

width：控制viewport的大小，可以指定的一个值，如果600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）。

height：和width相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

为什么我们要设置width和height©因为移动终端的分辨率比常用的显示器要小，假如我们把一般的网站在safari打开，会发现整体布局和文字都缩小的显示在手机屏幕上，只有我们把浏览器宽度设置成和我们手机分辨率宽度一样，才是1:1的对应显示。所以一般我们开发webapp，width=device-width把宽度设置成和设备宽度一样。

至于initial-scale、maximum-scale、minimum-scale就是在出现了页面内容和设备分辨率不是1:1对应的时候用的，我们都知道用户可以使用双指操作将safari页面放大或者缩小，user-scalable可以控制用户是否可以这么做。假如我们设置了width=device-width，一般我们不再需要给用户缩放。特别针对混合型的webapp，我们体验尽量向原生APP靠拢，不允许缩放是大部分应用的做法。

这里有个经验分享，之前我在使用jquerymobile1.0.2版本的时候，发现jqm初始化的时候会用javascript把user-scalable设置成true，所以那时候即使我加了meta标签，也没有作用，后来才发现是jqm搞的鬼。后来1.1.0版本没有这个问题，假如你设置了这个meta标签的属性发现不生效，可以检查一下是不是一些第3方框架对这些属性做了设置。

3.webkitTouchCallout禁止原生弹出菜单

在IOS浏览器里面，假如用户长按a标签，都会出现默认的弹出菜单事件，例如：



CSS3的webkitTouchCallout属性可以控制这个原生行为是否被执行，只要加上这段CSS

javascript也是可以设置的：

上面都是设置在body全局上，当然如果你只想某些地方不执行这种行为，可以把CSS属性定义在对应的地方。

4.webkitUserSelect禁止用户选中

如果用户长按web网页的文本内容，都会出现选中的行为，提供复制文字等功能。



和上面的属性一样，设置可以禁止这种默认行为。

CSS的方法

javascript方法