移动端页面开发总结(一)
meta标签的相关知识
?1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。
?2、移动端页面设置视口宽度等于定宽(如750px),并禁止缩放,常用于微信浏览器页面。
3、禁止将页面中的数字识别为电话号码
4、忽略Android平台中对邮箱地址的识别
5、当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
6、将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
html5 viewport模板
?
?
?
?
?
?1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
?2、移动端页面设置视口宽度等于定宽(如750px),并禁止缩放,常用于微信浏览器页面。
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">
3、禁止将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
4、忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
5、当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
6、将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
html5 viewport模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>Document</title>
</head>
<body>
content...
</body>
</html>
?
?
?
?
?