您所在的位置:小祥子 » 编程 » CSS » 正文

手机端开发

时间:2015-08-11 编辑:曾华萍 来源:CnBlogs

meta基础知识
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
< meta name="apple-mobile-web-app-capable" content="yes" />
< !-- ios7.0版本以后,safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
< !-- 可选default、black、black-translucent -->

viewport模板

1.<!DOCTYPE html>

2.<html>

3.<head>

4.<meta charset="utf-8">

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

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

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

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

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

10. <title>标题</title>

11. <link rel="stylesheet" href="index.CSS">

12. </head>

  1. 13.  

14. <body>

15. 这里开始内容

16. </body>

  1. 17.  

18. </html>

  1. 19.  

 

关键词:

相关文章