登录

在这个站点登录

保存我的登录记录

<<忘记密码?

还没有账号?点此注册>>

Jerry

HTML标签强制手机浏览器全屏显示

分享到:

本文已被浏览4539

前两天上去哪网,突然发现在UC浏览器加载完页面后会自动全屏,这两天用UC手机浏览器开发版调试了一下。在这里放一下UC手机浏览器开发版的下载和用法。

UC手机浏览器开发版V9.8.9.547

大小:14.87MB

MD5:B680C3E1FF18B6F79EA3A8394C7450CB

UC手机浏览器开发版介绍及使用方法

UC手机浏览器开发版是一个调试手机页面非常好用的工具,使用它可以实现像Firefox或者Chrome那样直接打开一个调试窗口,从而可以直接改动JS或者CSS、HTML等内容实现实时的更新显示效果。
使用这个工具首先是要安装好这款软件。这款UC开发版和普通的UC浏览器是不会冲突的,可以同时安装两个。由于开发版确实是没多少人能用的上,可以算是UC的一个副产品。在UC浏览器都已经开发到V10.9的现今,开发版依旧是上个版本V9.8,并且看得出来还是上个版本的界面和广告竟然广告是不变的,po主醉醉的。安装后,会在手机上出现UC浏览器的图标。这里要注意如果有安装UC浏览器的普通版,那么你会看到两个名字是一样的UC浏览器。那么就只能用图标来区分:更加扁平化的是新版的,稍有立体感的是旧版,也就是开发版。
开发版图标与普通版图标对比
这款开发版软件与普通的版本相同,看不出来是开发者版本。
应用界面
那么好,既然是开发者版本,那么就一定会能够调用出来他的调试窗口。这个调试窗口并不是在手机上显示,因为毕竟手机屏幕再大也就那么大点的地方,所以这款应用开创性的把调试窗口显示在了电脑上。
使用这款软件需要借助Google的大杀器Chrome,直接访问 http://手机的IP地址:9998/ 即可打开。Firefox上貌似是不能够使用的。会出现下面的这个界面:
Firefox无法使用开发版调试页面
所以我们用Chrome打开这个地址,这时会在手机上提示是否允许调试,当然要选择OK:
手机端提示是否允许调试
选择OK后即可在电脑上看到如下画面,这里指的是当前手机上所有已打开的页面,选择一个调试即可.
Chrome提示选择页面
点击希望调试的页面,即可开始像Chrome一样调试页面,只不过有一些地方出于HTML操作的限制,必须用双击才能够使用,同时因为分屏显示内容导致无法直接使用鼠标拾取元素定位。
调试界面

打开去哪儿网,和普通版本一样,成功的全屏。通过局域网访问到手机上。最开始认为会是用Javascript来实现的,但是所有js扒拉了一遍也没有觉得可能是这个功能的。最后还是在head标签中找到以下几行:
去哪儿网
去哪儿还是很人性的,写了个注释。我们看到,这五行代码,前两行是用来强制UC全屏,后三行是强制QQ全屏。将来还会继续收集强制其他浏览器全屏的代码。

<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
 手机扫描左边的二维码,立刻将文章收入手机!
 微信扫描左边二维码,点击右上角即可分享到朋友圈!
严禁任何非授权的采集与转载,转载须经站长同意并在文章显著位置标注本文连接,站长保留追究法律责任的权利.

评论

  1. qylcx7758
    #1

    大神好,我在git和stackoverflow翻了几页,都没找到支持在其他手机浏览器,例如2345,猎豹,搜狗浏览器的强制全屏代码,一些类似这样的代码,也是无效的,

    if(document.documentElement.scrollHeight &lt;= document.documentElement.clientHeight) {
        bodyTag = document.getElementsByTagName(&#039;body&#039;)[0];  
        bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + &#039;px&#039;;  
    }  
    setTimeout(function() {  
        window.scrollTo(0, 1);  
    }, 0);
    
    2017-12-22
    • 这段代码意思是说如果你的页面内容高度不足以充满整个窗口则强制增加内容高度使其充满整个屏幕.对于你说的那个强制全屏的功能是不可能实现的.本文所说的这个强制全屏只适用于国内的几款浏览器,在那些正规的主流浏览器上,比如Chrome Firefox之类的浏览器上,即使是使用Element.requestFullScreen这种直接表明就是拿来全屏的API也在Html5标准中指明了这个操作必须由用户触发.主要还是考虑安全性问题,如果把全屏和退出全屏的事件捆在一起,那岂不是成病毒了,不允许退出.如果说是基于HTML5做的应用,建议还是从浏览器套壳方面入手来实现强制全屏之类的功能.或者说吧全屏的DOM隐藏,不全屏就不让用那种.

      2018-01-3

 您需要 先登录 才可以回复.