移动端小结_meta设置与移动端页面样式重置

参考于safari官方的Support Meta Tags，部分参考于大漠的文章，但是我觉得大漠的文章里的对某些定义比较含糊，与官网上有些许出入，所以主要还是参照官方的

一些针对ios的meta设置

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

这个应该是使用得最多的了

telephone=no

页面中的一串数字，iphone会把它这串数字加下划线链接，点击这数字还会自动拨号，telephone=no就会禁止把数字转换成拨号链接

email=no

禁止设备识别email

adress=no

禁止跳转到地图

可以写成<meta name="format-detection" content="telephone=no,email=no">

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

官方解释是"If content is set to yes, the web application runs in full-screen mode;"此时webapp运行在全屏下，并可以通过safari的“添加到”把其添加到主屏幕

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

官网说使用的前提是设置了<meta name="apple-mobile-web-app-capable" content="yes" />此时顶部的status bar背景会显示为黑色，还可以设置为black-translucent值，但貌似现在已经不支持了吗？我在ios8.2下测试是不起任何效果的，虽然官网上仍有此属性的定义，但看到网上说貌似ios某个版本开始就不支持了？

关于<link>

<link rel="apple-touch-icon" href="icon.jpg" size="60x60">

用于指定webapp添加到主屏幕上的图标
 <link rel="apple-touch-startup-image" href="starup.png">

设置webapp的启动画面(不起效？)

默认样式重置:

1.-webkit-appearance:none

css3有一个新属性appearance,能使元素看上去像标准的用户界面元素，比如设置div{appearance:button;}能使div看上去像个按钮，但遗憾的是暂时没有浏览器支持这个属性

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

而-webkit-appearance:none在页面上主要是用于消除ios输入框和按钮的原生外观，这属性在前几天的腾讯的重构笔试中有考到过

此为本人手机ios8.2下未重置默认appearance时的表现

设置input{-webkit-appearance:none;}后:但是发现此时复选框和单选按钮在chrome浏览器会消失，而在safari下表现复选框和单选按钮选中后的样式较为怪异

应该要设置input[type=checkbox]:checked:after {}然后给一个图片表示选中

2.