移动端页面开发总结（一）

最新推荐文章于 2020-12-29 20:50:11 发布

夜梦星尘

最新推荐文章于 2020-12-29 20:50:11 发布

阅读量658

点赞数 1

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

meta标签的相关知识

1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。

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

2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

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模板

<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>
<link rel="stylesheet" href="index.css">
</head>
<body>
    content...
</body>
</html>

转载出处：柏龙博客