人生所有经过的路,
都是必经之路

使博客在qq中全屏打开

在qq中打开博客,顶部有很大一块蓝色,一直觉得很难看。

试了很多全屏的方法都无效,直到最近发现小哲网站在qq上打开可以全屏,分析发现是用了AmazeUI插件:
http://amazeui.org/javascript/fullscreen?_ver=2.x

本想页面加载完自动全屏,但可能出于安全考虑,全屏API仅能通过用户事件(如 click、touch、key) 初始化,像这种$(selector).click()由脚本触发也不管用。

于是想到下面方案:

判断qq内置浏览器

function is_QQInnerBro(){
if (navigator.userAgent.indexOf('MQQBrowser') !== -1) {
return true;
} else {
return false;
}
};

如果是qq内置浏览器增加一个div节点,此节点设置position:fixed;使它悬浮在最上面

var text=$("
<div></div>
").attr("style","font-size: 0px;width:100%;height: 1000px;position:fixed; top: 1px; left: 1px;background: red;").attr("id","admin-fullscreen");
$("body").after(text);

手指触摸div调用全屏接口,然后把div节点删除。

(function($) {
$(function() {
var $fullText = $('.admin-fullText');
$('#admin-fullscreen').on('touchstart', function() {
$.AMUI.fullscreen.toggle();
$("#admin-fullscreen").remove()
});

});
})(jQuery);

在安卓7.1.1 miui测试可用。
效果如下,是不是清爽多了

钟声博客

欢迎在qq中打开钟声博客查看效果
https://www.xn--4qsv20l.com/

本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可 »钟声博客 » 使博客在qq中全屏打开

相关推荐

  • 加v认证-wordpress插件
  • 驾校一行js,完成的chrome插件
  • 基于人脸识别的课堂考勤系统1.0
  • 大话PHP设计模式(一)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

我的简书友情链接