设置浏览器横屏可行性测试,附带浏览器全屏功能

输入法问题:
1、QQ浏览器、UC浏览器可通过标签设置横屏(这种模式下输入法也是横屏状态)

    <meta name='full-screen' content='true' />
    <meta name='x5-fullscreen' content='true' />
    <meta name='360-fullscreen' content='true' />
    <meta name="screen-orientation"content="landscape"/>
    <meta name="x5-orientation"content="landscape"/>

2、下面方法测试在华为浏览器可行,在微信和QQ浏览器中无效
通过screen.orientation可以定义手机屏幕的方向
但是lock()方法仅在浏览器已经通过requestFullscreen()切换到全屏模式时起作用

    /** 全屏切换 */
    public static FullScreenSwitch() {
        // // Laya 自带全屏功能
        // Laya.stage.fullScreenEnabled = (true);

        var document = Laya.Browser.document;
        var documentElement = document.documentElement;

        if(document.fullscreenEnabled || document.msFullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled|| document.webkitFullscreenEnabled){

            if(document.fullscreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){
                if(document.exitFullScreen) {
                    document.exitFullScreen();
                //兼容Firefox
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                //兼容Chrome, Safari and Opera等
                } else if(document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                //兼容IE/Edge
                } else if(documentElement.msExitFullscreen) {
                    documentElement.msExitFullscreen();
                }
            }else{
                // 全屏调用
                // msRequestFullscreen:兼容火狐   webkitRequestFullScreen:兼容Chrome, Safari and Opera等   兼容IE/Edge,只能写msRequestFullscreen
                var rfs = documentElement.requestFullScreen ||  documentElement.requestFullscreen || documentElement.webkitRequestFullScreen || documentElement.webkitRequestFullscreen|| documentElement.mozRequestFullScreen|| documentElement.mozRequestFullscreen || documentElement.msRequestFullscreen|| documentElement.msRequestFullScreen || documentElement.oRequestFullScreen|| documentElement.oRequestFullscreen;
                if (typeof rfs != "undefined" && rfs) {
                    rfs.call(documentElement);

                    var orientation = Laya.Browser.window.screen.orientation    ||
                    Laya.Browser.window.screen.mozOrientation ||
                    Laya.Browser.window.screen.msOrientation  ||
                    null;
        
                    orientation.lock("landscape-primary");
                }
            }
        }else{
            alert('没用有能力全屏显示元素并且不支持全屏显示')
        }
    }

3、微信浏览器无权限进行相关设置以上设置在微信中无用
1、微信浏览器是基于微信APP的网页,是否全屏在微信中设置。
2、小程序小游戏可以通过json文件中配置"pageOrientation": “landscap” “deviceOrientation”:“landscape” 设置横屏
(官方回答:目前暂时不支持网页应用横竖屏切换的接口)
https://developers.weixin.qq.com/community/enterprisewechat/doc/0006ac16be8ce8d6192b4bc5256800?ivk_sa=1024320u

4、也没有相关控制设置输入法的API

5、IOS使用上面方法暂不可行

根据以上问题,还是要做个功能完善的虚拟键盘功能(时间问题)。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JIQIU.YANG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值