移动端meta标签设置
网上搜索了下,整理下移动端页面,需要注意的
控制显示区域各种属性:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width - viewport的宽度(范围从 200 到 10,000,默认为 980 像素)
height – viewport的高度(范围从 223 到 10,000 )
initial-scale - 初始的缩放比例(范围从 > 0 到 10)
minimum-scale - 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放(no,yes||0,1)
[attachimg]
1.http-equiv 属性的 Content-Type 值(显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。
用法:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。
[attachimg]
2.name 属性设置作者姓名及联系方式
<meta name="author" contect="liudanyun, liudy102@163.com" />
[attachimg]
3.忽略将数字变为电话号码:
<meta content="telephone=no" name="format-detection">
一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!
[attachimg]
4.IOS中Safari允许全屏浏览:
<meta content="yes" name="apple-mobile-web-app-capable">
[attachimg]
5.IOS中Safari顶端状态条样式:
<meta content="black" name="apple-mobile-web-app-status-bar-style">
[attachimg]
6.使用特殊链接:
如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,
<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
或用于单元格:
<td onclick="location.href='tel:122'">
如果哪里有需要补充的请下方留言!谢谢!
by:YPF