移动端UC /QQ 浏览器的部分私有Meta 属性
如同桌面端一样,在国内做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 浏览器。
- 《深入理解Java虚拟机》(六)堆内存使用分析,垃圾收集器 GC 日志解读
- Knockout.js是什么?
- 简单方法检测远端用户的反病毒软件
- 使用 JS 构建跨平台的原生应用(一):React Native for Android 初探
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 在Windows上安装Jekyll
- 如何解决ajax跨域问题
- 基础篇章:React Native之 Image 的讲解
- 防守式编程的艺术
- Git 简单命令,木有高深内容
- 基础篇章:React Native之 ScrollView 的讲解
- 常用 Git 命令清单
- 如何将配置spring文件指定名字,指定位置
- 基础篇章:React Native 之 TextInput 的讲解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux的最大打开文件数限制修改方法
- Shell中如何删除文本比较长的行的实现方法
- apache 开启重定向 rewrite的实现方法
- CentOS 7搭建Linux GPU服务器的教程
- 简单谈谈Linux内核定时器
- Ubuntu cron日志开启与查看的实现步骤
- 详解Apache配置多个监听端口和不同的网站目录
- CentOS7服务器中apache、php7以及mysql5.7的安装配置代码
- Ubuntu中静态DNS配置的方法详解
- shiro缓存机实例代码
- Linux deepin 删除多余内核的实现方法
- linux烧写、配置、搭建Edison环境
- 详解使用 split 命令分割 Linux 文件
- 在博客后台为内容模块实现增删改查功能
- 解决Debian系统自动更新软件包的问题的方法