踩坑：Unity导出WebGL发布到手机上竖屏时强制显示横屏手机怎么调横竖屏「踩坑：Unity导出WebGL发布到手机上竖屏时强制显示横屏」

公司的项目需要将游戏导出WebGL 发布到Web平台 本以为是个很简单的事情 谁知道却被个横竖屏适配搞的头晕 毕竟只有大学浅浅的学了下HTML这门语言 出来工作后基本上都是在跟C# Lua打交道 言归正传 看看具体问题吧

游戏如果从横屏进入 基本上不会有什么适配问题

但是现在人大多数手机都是开着 锁定屏幕方向 这就导致大部分人其实是以竖屏进入游戏的

像这样：

这样显然是不符合用户体验的 要用户先把屏幕锁定关了 在旋转成横屏 这一操作在游戏引流里都可以直接劝退一波用户了

理论方案

理论上解决很简单 只需在index里进入时判断手机方向并监听手机旋转事件

改变

或者其他嵌套unity-container的标签通过CSS的旋转属性旋转90度就搞定了

但是实际上并没有那么快乐 经过你不断的努力调整标签终于实现了你就会发现

先不说比例问题 最致命的问题是 旋转后 按钮的碰撞监听并没有旋转 按钮的实际监听范围还是红框 这一下子就犯了难 研究许久后发现需要使用HTML中的<iframe>标签来解决

实际解决

新建一个新的index.html  将原本的index重命名为game 通过iframe标签引入到新的index里面

同时在新的index里面监听手机旋转事件 通过添加删除类来旋转页面

代码如下

 而我们的game.html(原本U3D导出的index.html) 只需要做好全屏适配即可

运行效果如下

竖屏进入→转横屏

横屏进入→转竖屏

至此适配方案结束

阿勒泰版权声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕，E-mail：xinmeigg88@163.com