H5手机端网站开发meta参数全解析

先看看标准化H5移动端顶部meta 参数设置是如何：

<!DOCTYPE html>  
<html>  
  
<head>  
  <meta charset="utf-8">  
  <meta name="keywords" content="" />  
  <meta name="description" content="" />  
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />  
  <meta name="format-detection" content="telephone=no" />  
  <meta name="apple-mobile-web-app-capable" content="yes" />  
  <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  <title>web_mobile</title>  
</head>  
  
<body>  
  <div id="app"></div>  
  <!-- built files will be auto injected -->  
</body>  
  
</html>

1、 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 指定的iphone中safari顶端的状态条的样式，仅限苹果端。

参数：默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

2、 <meta name="apple-mobile-web-app-capable" content="yes" /> 苹果设备中的safari私有meta标签，允许全屏模式浏览，隐藏浏览器导航栏；

3、　<meta name="format-detection" content="telephone=no" /> 禁止将数字变成电话号码，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话这个一般用的不多。

4、　这个是最重要：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

　　width ---- viewport的宽度（width=device-width意思是：宽度等于设备宽度）

　　height ------ viewport的高度（height=device-height意思是：高度等于设备宽度）

　　initial-scale ----- 初始的缩放比例

　　minimum-scale ----- 允许用户缩放到的最小比例

　　maximum-scale ----- 允许用户缩放到的最大比例

　　user-scalable ----- 用户是否可以手动缩放

掌握以上几点是不是做手机移动端站很容易了。

模板简介：该模板名称为【H5手机端网站开发meta参数全解析】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【手机建站】栏目查找您需要的精美模板。