移动端开发知识整理

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上已看不到效果 -->

viewport模板

//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>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
这里开始内容
</body>
</html>
/////////////////////////////////////////////////////////
//viewport模板 - target-densitydpi=device-dpi,android 2.3.5以下版本不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->
<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>标题</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
这里开始内容
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 5,419评论 0 4
  • (转自:http://blog.csdn.net/tengdazhang770960436/article/det...
    一个废人阅读 4,017评论 0 1
  • 我的~飘~流记是性格?是自尊?是家庭?不,是骨子里流淌的高贵的血液铸就了他们的抗打击能力,他们能享受奢华的生活,也...
    爱鑫阅读 2,241评论 3 1
  • 早上四点多爬起来练车,然后带孩子,做家务,孩子刚睡,我也好瞌睡,那就睡吧,明天继续早起练车,再坚持三天!
    四叶草hr阅读 1,443评论 0 0
  • 昨晚睡前刷了个微信公众号那里有一篇文章讲了怎么区分五谷 看到标题我才后知后觉的发现 我是不知五谷为何物的人 我一直...
    黁黁阅读 1,696评论 0 0