移动端页面头部解析

viewport（视口）

视口可控制网页在移动设备上的显示方式。如果未指定视口，移动设备将以典型桌面屏幕的宽度来呈现网页，并调整网页使其适合屏幕大小。通过设置视口，您可以控制网页在不同设备上的宽度和缩放比例。
下图是safari开发者文档中的图示：

ViewPort 标记

ViewPort 标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大和最小缩放比例是什么。使用ViewPort 标记还表示文档针对移动设备进行了优化。ViewPort 标记的content值是由指令及其值组成的以逗号分隔的列表。

视口设置

示例：

<meta name=‘viewport‘ content=‘user-scalable=no,width=device-width,minimum-scale‘/>

content中的内容

在android浏览器中，我们一般这么设置：

• width: 具体值/device-width/
  指定视区的逻辑宽度，可以为具体的值，也可以是设备屏幕宽度
• height: 具体值/device-height
  指定视区的逻辑高度，可以为具体的值，也可是是设备的屏幕高度

• user-scalable: yes/no
  是否允许用户缩放页面
• initial-scale: number
  指定页面的初始缩放比例
• maximum-scale: number
  用户可以缩放的最大比例
• minimum-scale: number
  用户可以缩放的最小比例
• minimal-ui: 无值
  设置打开网页时隐藏地址栏和导航栏（众多安卓浏览器的实现各不一样，safari根据系统版本有时可以全屏，有时无影响）
• 设置一个webapp是否全屏显示
  测试：普通页面测试无效（5C）

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

• 设置是否全屏
  测试：safari上无效（5C 6 plus）

  
  <meta name="apple-touch-fullscreen" content="no">
  设置添加到主屏幕后是否全屏显示，这里设置不全屏显示
  
  

• 设置是否进行格式识别
  测试：安卓浏览器上测试原本就不会识别出号码，safari可以使用该meta避免自动识别

  
  <meta name="format-detection" content="telephone=no">
  设置不自动识别数字为电话号码
  
  

• apple-mobile-web-app-status-bar-style: 设置状态栏样式
  测试：无效（5C，6 plus）

  
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  设置状态栏为黑色
  
  

• 设置书签图
  测试：android浏览器在添加标签时使用该图标，但safari在添加书签时使用apple-touch-icon-precomposed指定的图
  如图：
  

  
  <link rel="shortcut icon" href="http://g.tbcdn.cn/mui/global/1.2.35/file/favicon.ico" type="image/x-icon">
  
  

• 设置主屏幕图
  测试：android浏览器和safari均可行
  如图：
  

  
  <link rel="apple-touch-icon-precomposed" href="http://img01.taobaocdn.com/tps/i1/T1zo51XxXfXXXeOHro-144-144.png">
  
  

来自为知笔记(Wiz)