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

news/2025/1/16 4:03:23/

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

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

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

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

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

缩放不出滚动条

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

排版

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

夜间模式

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

强制图片显示

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

...

...

应用模式

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

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

设置屏幕方向

设置全屏

设置屏幕模式

对比

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

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


http://www.ppmy.cn/news/470780.html

相关文章

手机端原生H5video 和QQ浏览器 兼容性

<ul class"pho_ved_list" id"photo"><?php $index0;?><?php if (isset($show) && !empty($show)): ?><?php foreach ($show as $val): ?><li class"" style"width: 33.33%;overflow:hidden;heigh…

移动开发webapp开发常用meta设置手机浏览器全屏模式

1、WebApp全屏模式&#xff1a; <meta name"viewport" content"widthdevice-width,initial-scale1.0, minimum-scale1.0, maximum-scale1.0, user-scalableno,minimal-ui"> 注意&#xff1a;viewport 后面加上 minimal-ui 在safri 体现效果 <meta…

浏览器的全屏功能小结

原文地址: 浏览器的全屏功能小结 背景 浏览器页面在视频播放, 图片浏览, 编辑文本等场景, 会遇到增大页面的可查看和可交互区域的需求. 对于这种场景, 一般做法是提供一个全屏按钮, 用户可以选择点击按钮触发全屏. 本文对实现浏览器全屏进行简单总结: 伪全屏, 浏览器全屏和元素…

video在微信和QQ浏览器中不全屏播放解决

最近公司做一个视频活动的HTML5页面&#xff0c;页面并不复杂&#xff0c;但是要求视频播放的时候不全屏。在网上看到好论坛类似的基本问题&#xff0c;以前有申请白名单的&#xff0c;在白名单的视频链接或者腾讯旗下的视频链接是原生播放&#xff0c;否则安卓会被劫持成腾讯家…

手机浏览器全屏模式

申明&#xff1a;文章部分内容是我在各个网站上以及自己做项目时的总结&#xff0c;出处我已经不记得了。如果遇到版权问题请联系我&#xff0c;我会及时删掉。我是一个刚刚做前端1个多月的初学者&#xff0c;如果哪里有错误&#xff0c;还请各位大神们不吝赐教。欢迎吐槽与分享…

android手机浏览器研究报告,QQ浏览器Android客户端产品体验报告

概览 手机&#xff1a;魅族MX3 操作系统&#xff1a;Flyme OS 3.5.2(A19220) 体验产品&#xff1a;QQ浏览器Android客户端 软件版本&#xff1a;5.7.2.1400 需求分析 目标人群&#xff1a;所有移动互联网网民 使用场景&#xff1a;用户使用手机上网浏览网页、看小说、看视频、购…

Unity WEBGL设置浏览器全屏

转自unity 生成webGL自适应屏幕_姚智苒的博客-CSDN博客 在生成的html里面修改代码 <script type"text/javascript"> function Reset() { var canvas document.getElementById("#canvas"); canvas.height document.documentElement.clien…

js怎么让浏览器自动全屏显示

在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发&#xff0c;所以不能自动全屏&#xff1b;用户事件触发方法如下&#xff1a; // 判断各种浏览器&#xff0c;找到正确的方法 进入全屏 function launchFullscreen (element) {if (element.requestFullscreencreen) {el…