移动端页面头部解析

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">




郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。