移动端页面头部解析

viewport（视口）

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

ViewPort 标记

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

视口设置

示例：

1. <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）

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

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

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

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

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

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

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

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

    1. <link rel="shortcut icon" href="http://g.tbcdn.cn/mui/global/1.2.35/file/favicon.ico" type="image/x-icon">
  • 设置主屏幕图
    测试：android浏览器和safari均可行
    如图：
    
    1. <link rel="apple-touch-icon-precomposed" href="http://img01.taobaocdn.com/tps/i1/T1zo51XxXfXXXeOHro-144-144.png">

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/rubyisaPM/p/4380059.html