现在做WEB开发(不仅限于移动开发),都要考虑响应式布局与各种移动设备的显示效果等,国内的移动设备浏览器主要是UC浏览器和QQ浏览器为主(内核均为wekit内核),那么开发人员就必须知道一些它们的Meta私有属性,以更好的完成效果。文末有UC/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私有属性
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
普通浏览模式:
<meta name="x5-page-mode" content="default" />
网页应用模式:
<meta name="x5-page-mode" content="app" />
对比
在Jeff 的实际使用的情况下,发现对于控制全屏的meta 标签,UC 跟QQ 处理的方式稍有不同:区别在于处理系统状态栏,UC 是直接覆盖系统状态栏,而QQ 仍然保留之。从原生应用的场景及用户角度看,QQ 的这种“伪全屏”反而是更为友好。