移动端UC /QQ 浏览器的部分私有Meta 属性

Posted 2020-10-14 karila

如同桌面端一样，在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都是wekit 内核一霸天下，单从这个角度看兼容工作相对于桌面的百花齐放舒服了不少。

数据就不罗列了，目前移动端国产浏览器的占有率上是UC 跟QQ 浏览器这对基佬，所以做前端肯定优先考虑这二货。下面就说下移动端UC /QQ 浏览器的部分私有Meta 属性，都来自其开发者文档（UC开发者中心，左下一doc文档，QQ浏览器）。

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

设置屏幕方向为横屏还是竖屏

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

　　

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

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

　　

缩放不出滚动条

<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="imagemode" content="force"/>

　　

?UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个

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

　　

应用模式

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

　　

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

QQ 浏览器x5内核定制标签说明

设置屏幕方向

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

　　

设置全屏

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

　　

设置屏幕模式

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

对比

在Jeff 的实际使用的情况下，发现对于控制全屏的meta 标签，UC 跟QQ 处理的方式稍有不同：区别在于处理系统状态栏，UC 是直接覆盖系统状态栏，而QQ 仍然保留之。从原生应用的场景及用户角度看，QQ 的这种“伪全屏”反而是更为友好。

说点废话：升级到安卓微信最新版，发现微信内置的浏览器已经换为qq的x5浏览器内核了，而非之前的采用默认浏览器的内核。这个改变值得肯定，毕竟对于质量参差不齐的安卓默认浏览器，x5浏览器内核对于html5等的支持相对更加优秀。加上目前微信的霸主地位，更多的H5场景可能更多是在微信内置浏览器中展开。也从这个角度，UC浏览器市场占有率的数字岌岌可危——如果你将微信内置浏览器归为QQ 浏览器。

原文链接:https://devework.com/uc-qq-brower-meta.html