HTML5 viewport模板

HTML5 viewport模板

总结一下viewporyt模板的内容。

目录：

---

常用的Viewport meta标签

viewport 就是用户网页的可视区域，手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

基础的viewport meta标签设置使HTML5页面窗口自动调整到设备宽度，并禁止用户缩放页面:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

• width：控制 viewport 的宽度，可以指定的一个具体的值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素），可以通过 document.documentElement.clientWidth 获取。
• height：控制 viewport 的高度，与 width 相对应，可以通过 document.documentElement.clientHeight 获取。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。如果是想要一打开网页就自动以原始比例显示则需要设置为 1.0 。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放，设置为 no 表示不允许用户手动缩放。

---

移动端部分私有Meta 属性

UC浏览器的部分私有Meta 属性

<meta name="screen-orientation" content="portrait|landscape">

设置屏幕方向为横屏还是竖屏，portrait表示竖屏。

<meta name="full-screen" content="yes">

设置是否全屏，yes表示强制浏览器全屏。

<meta name="nightmode" content="enable|disable"/>

nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。

<meta name="imagemode" content="force"/>

设置强制图片显示，忽视UC浏览器的无图模式。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片（验证码图片等）进行设置，那么可以使用这个：

<img src="" show="force">

QQ 浏览器x5内核(微信内置浏览器)部分私有Meta 属性

<meta name="x5-orientation" content="portrait|landscape" />

设置屏幕方向为横屏还是竖屏，portrait表示竖屏。

<meta name="x5-fullscreen" content="true" />

设置全屏，true表示强制浏览器全屏

<meta name="x5-page-mode" content="app" />

设置屏幕模式

IOS设备部分私有Meta 属性

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

用苹果手机safari上打开页面是隐藏菜单并强制全屏显示，实现网站对web app的支持

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

设置在web app应用下状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

---

常用的HTML5 viewport模板

<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="full-screen" content="yes">
        <meta name="x5-fullscreen" content="true">
        <meta name="apple-touch-fullscreen" content="yes">
        <meta name="screen-orientation" content="portrait">
        <meta name="x5-orientation" content="portrait">
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="format-detection" content="email=no" />