移动游览器私有Meta属性

Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。我搜集了一些资料整理了一些在移动端的mate私有属性，用以补充HTML meta标签总结,HTML5 head meta属性整理 这篇文章，分享给大家。

一、Safari浏览器私有 Meta 属性

<!-- 强制显示方式 -->

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

让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

<!-- 允许全屏模式浏览 -->

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

在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar；

<!-- 定义safari顶端状态条的样式 -->

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

其值有三个： default（白色）black（黑色） black-translucent（灰色半透明）。

<!-- 开启WEB APP 支持 -->

<meta name="apple-touch-fullscreen" content="yes">

开启对web app程序的支持

<!-- WEB APP名称 -->

<meta name="apple-mobile-web-app-title" content="APP名">

是指在发送到屏幕的时候默认的命名

<!-- 隐藏顶部 -->

<meta name="viewport" content="minimal-ui">

让网页在加载时便可隐藏顶部的地址栏与底部的导航栏

二、QQ浏览器私有 Meta 属性（x5内核定制标签）

<!-- 设置屏幕方向 -->

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

设置屏幕方向为横屏还是竖屏portrait为横屏 | landscapeo为坚屏。

<!-- 设置全屏 -->

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

是否全屏，yes表示强制浏览器全屏，no则反之。

<!-- 设置屏幕模式 -->

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

 

三、UC浏览器私有 Meta 属性

 

<!-- 横屏、竖屏显示 -->

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

设置屏幕方向为横屏还是竖屏portrait为横屏 | landscapeo为坚屏。

<!-- 设置是否全屏 -->

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

是否全屏，yes表示强制浏览器全屏，no则反之。

<!-- 缩放不出滚动条 -->

<meta name="viewport" content="uc-fitscreen=no|yes"/>

缩放不出滚动条。设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。

<!-- 排版 -->

<meta name="layoutmode" content="fitscreen|standard" />

排版，fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。

<!-- 夜间模式 -->

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

nightmode的值设置为disable后，浏览器的夜间模式就不起作用

<!-- 应用模式 -->

<meta name="browsermode" content="application"/>

使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示

<!-- 强制图片显示 -->

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

UC 浏览器为了节省流量，为用户提供了无图模式。不过我们可以通过这个属性来强制浏览器显示图片，而有时候为了提高用户体验，无图模式还是有必要的，对于有些 图片是不得不显示的，如：验证码，我们也可以单独设置其为显示模式，其他图片可根据用户的设置来进行弹性选择。

四、360浏览器私有 Meta 属性

<!-- 开启极速模式 -->

<meta name="renderer" content="webkit">

五、其它常用的Meta属性

<!-- 禁止百度转码 -->

<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 开启短信功能 -->

<a href="sms:123456">123456</a>

<!-- 优先使用最新版本 IE 和 Chrome -->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

为了更好的学习了解可以结合https://blog.csdn.net/linghunyoushou/article/details/81119264，作为补充。

本文部分内容采集自蚂蚁社区，文章仅用作学习交流，如有侵权请留言。