参考于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.