踩坑:Unity导出WebGL发布到手机上竖屏时强制显示横屏

具体的适配问题

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

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

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

像这样:

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

解决方案

理论方案

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

<script>var orientation = window.orientation;if(orientation == 180 || orientation == 0 || orientation == -180){//竖屏}else{//横屏 orientation = 90 或者 orientation = -90 }window.onorientationchange = function () {//监听手机旋转事件if(orientation == 180 || orientation == 0 || orientation == -180){//竖屏 旋转-90度}else{//横屏 旋转90度}};
</script>

改变

<canvas id="unity-canvas"></canvas>

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

transform: rotate(90deg)

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

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

<iframe src="game.html"></iframe>

实际解决

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

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

代码如下

<style>.landscape-screen{transform-origin: top left;transform: rotate(90deg) translateY(-100%)}
</style>
<iframe id="Frame" style="Frame"  src="game.html"></iframe>
<script>var orientation = window.orientation;//开始时调用var Frame = document.getElementById("Frame");if(orientation == 180 || orientation == 0 || orientation == -180){//注意竖屏时要把 iframe的宽设置为当前窗口的高度 高设置为当前窗口的宽度Frame.height = window.innerWidth;Frame.width = window.innerHeight;//通过css样式旋转90度Frame.classList.add("landscape-screen");}else{//横屏时则正常Frame.height = window.innerHeight;Frame.width = window.innerWidth;//通过移除类去掉css样式Frame.classList.remove("landscape-screen");}//监听手机旋转事件 根据旋转状态设置旋转的css样式window.onorientationchange = function () {if(orientation == 180 || orientation == 0 || orientation == -180){Frame.classList.add("landscape-screen");}else{Frame.classList.remove("landscape-screen");}};
</script>

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

运行效果如下

竖屏进入→转横屏

横屏进入→转竖屏

至此适配方案结束

演示DEMO链接

GitHub - Wyleee/UnityWebGLMobileAdapter: 演示Unity导出的WebGL项目在手机上的横竖屏适配

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/41451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 多进程多线程间通信

目录 一、进程间通信 1、管道&#xff08;Pipe&#xff09; 2、消息队列&#xff08;Message Queue&#xff09; 3、共享内存&#xff08;Shared Memory&#xff09; 4、信号量&#xff08;Semaphore&#xff09; 5、套接字&#xff08;Socket&#xff09; 6、信号&…

Finding Global Homophily in Graph Neural Networks When Meeting Heterophily

本文发表于:ICML22 推荐指数: #paper/⭐⭐⭐ 问题背景: 异配图的邻接矩阵难以确定,以及异配图的计算复杂度开销大 可行的解决办法:高通滤波多跳邻居,GPRGNN(pagerank一类&#xff0c;各阶邻居的权重不同,ACM-GCN&#xff08;高低通滤波,H2GCN&#xff08;应该复杂度很大&…

碳课堂|搞清楚碳足迹,只看这篇文章就够了

碳足迹管理是碳达峰碳中和的重要政策工具&#xff0c;2023年12月&#xff0c;国家发展改革委、工信部、国家市场监管总局、住房城乡建设部、交通运输部等部门联合印发《关于加快建立产品碳足迹管理体系的意见》&#xff0c;对产品碳足迹管理各项重点任务作出系统部署。 推动碳…

音乐播放器

目录 一、设计目标二、实现流程1. 数据库操作2. 后端功能实现3. 前端UI界面实现4. 程序入口 三、项目收获 一、设计目标 1. 模拟网易云音乐&#xff0c;实现本地音乐盒。 2. 功能分析&#xff1a; 登录功能窗口显示加载本地音乐建立播放列表播放音乐删除播放列表音乐 3.设计思…

通过Java调用OceanBase云平台API

最近由于工作原因又开始捣鼓OceanBase&#xff0c;OceanBase云平台(OCP)提供了强大的管理和监控功能&#xff0c;而且对外开放API接口&#xff0c;可以将部分监控整合到自己的平台&#xff0c;所以写了个Java调用OCP API的demo做为自己的技术储备&#xff0c;也想分享给大家。也…

linux下mysql的定时备份

备份是容灾的基础&#xff0c;是指为了防止系统出现操作或系统故障导致数据丢失&#xff0c;而将全部或部分数据集合从应用主机的硬盘或阵列复制到其他的存储介质的过程为什么备份 硬件故障软件故障误操作病毒入侵保留历史记录灾难性事件 存储介质 光盘磁带硬盘磁盘阵列DAS:直接…

[leetcode]文件组合

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<vector<int>> fileCombination(int target) {vector<vector<int>> vec;vector<int> res;int sum 0, limit (target - 1) / 2; // (target - 1) / 2 等效于 target /…

一些你可能不知道的前端小优化- ̗̀(๑ᵔ⌔ᵔ๑)

前言 以前写css和html和一些原生DOM操作&#xff0c;感觉写完就完事了。从来没有考虑过一些性能优化的问题&#xff0c;刚好最近学完了浏览器的事件循环和浏览器的工作流程。今天大家分享一些我刚学习到的前端小优化。 浏览器的工作流程 浏览器的渲染过程大致分为以下几个阶…

Windows 11内置一键系统备份与还原 轻松替代Ghost

面对系统崩溃、恶意软件侵袭或其他不可预见因素导致的启动失败&#xff0c;Windows 7~Windows 11内置的系统映像功能能够迅速将您的系统恢复至健康状态&#xff0c;确保工作的连续性和数据的完整性。 Windows内置3种备份策略 U盘备份&#xff1a;便携且安全 打开“创建一个恢…

Ubuntu20.04突然没网的一种解决办法

本来要学一下点云地图处理&#xff0c;用octomap库&#xff0c;但是提示少了octomap-server库&#xff0c;然后通过下面命令安装的时候&#xff1a; sudo apt install ros-noetic-octomap-server 提示&#xff1a;错误:7 https://mirrors.ustc.edu.cn/ubuntu focal-security …

MWC上海展 | 创新微MinewSemi携ME54系列新品亮相Nordic展台

6月28日&#xff0c; 2024MWC上海圆满落幕&#xff0c;此次盛会吸引了来自全球124个国家及地区的近40,000名与会者。本届大会以“未来先行&#xff08;Future First&#xff09;”为主题&#xff0c;聚焦“超越5G”“人工智能经济”“数智制造”三大子主题&#xff0c;探索讨论…

leetcode热题HOT42. 接雨水

一、问题描述&#xff1a; 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 二、解题思路&#xff1a; 思路1&#xff1a;通过动态规划的预处理方式&#xff0c;分别计算每个柱子左右两侧的最大高度&…

js数据库多级分类按树形结构打印

可以使用 JavaScript 来按层级打印 categories 数组。首先&#xff0c;需要将这个数组转换成一个树形结构&#xff0c;然后再进行递归或者迭代来打印每个层级的内容。 以下是一个示例代码&#xff0c;用来实现这个功能&#xff1a; const categories [{ id: 2, name: "…

java如何删除字符串内部分字符

java中&#xff0c;如果要删除字符串内部分字符&#xff0c;需要用delete方法&#xff0c;前提字符串是可变字符串StringBuffer类型的。 delete方法的语法格式是sbf.delete(start,end) 其中&#xff0c;sbf是任意StringBuffer对象&#xff0c;start是起始索引&#xff0c;end…

AQ mode

算法原理概述 AQ即adaptive quantization(自适应量化),属于宏块级别码流分配的范畴,在一帧的宏块之间调整码率分配,x264中AQ算法的核心内容是:复杂宏块使用大的QP,简单宏块使用小的QP。x264如何定义复杂?x264是根据宏块内像素值的方差来评价宏块复杂性,方差越大,宏块…

溶解氧(DO)理论指南(1)

转载自梅特勒官网资料&#xff0c;仅用于学习交流&#xff0c;侵权则删&#xff01; 溶解氧理论指南 1 溶解氧(DO)原理1.1 溶解氧和分压1.2 氧气在水中的溶解度1.3 溶解氧对生物的重要性1.4 溶解氧对工业的重要性 1 溶解氧(DO)原理 氧是宇宙中第三大常见元素&#xff0c;也是…

JavaScript(6)——数据类型转换

为什么需要类型转换&#xff1f; JavaScript是弱数据类型&#xff1a;JavaScript不知道变量到底属于哪种数据类型&#xff0c;只有赋值了才清除 使用表单&#xff0c;prompt获取的数据默认为字符串类型&#xff0c;此时不能直接进行算数运算 隐式转换 某些运算符被执行时&am…

力扣hot100-链表

文章目录 概要链表的类型 题目&#xff1a;相交链表题解 概要 链表&#xff08;Linked List&#xff09;是数据结构中的一种&#xff0c;用于存储具有线性关系的数据。在链表中&#xff0c;每个元素称为一个节点&#xff08;Node&#xff09;&#xff0c;每个节点包含两个部分…

”极大似然估计“和”贝叶斯估计“思想对比

极大似然估计&#xff08;Maximum Likelihood Estimation, MLE&#xff09;和贝叶斯估计&#xff08;Bayesian Estimation&#xff09;是统计学中两种重要的参数估计方法&#xff0c;它们在思想和应用上有着显著的差异。下面我将详细对比这两种方法的思想&#xff0c;并分别举出…

两次叛国投敌,没有祸及子孙反而家族长盛不衰的传奇

这个人就是韩国国王韩王信&#xff0c;汉朝八大异姓王之一。 第一次叛国投敌&#xff0c;发生在楚汉争霸时期。有一次他的军队被项羽包围&#xff0c;于是选择了投降。不过&#xff0c;这是权宜之计&#xff0c;不久就借机回到刘邦阵营。 第二次叛国投敌&#xff0c;发生在西…