小游戏横屏配置后显示不正常
发布于 5 年前 作者 xiuying44 18945 次浏览 来自 问答

1. 横屏首先在game.json配置:

{

    "deviceOrientation": "landscape"

}


2. 在调用

import './js/libs/weapp-adapter'

import './js/libs/symbol'

之后重新获取画布

var canvas = wx.createCanvas()


3. 更改屏幕宽高变量

const screenWidth  = window.innerWidth

const screenHeight = window.innerHeight

改为 微信canvas的

const screenWidth  = canvas.width

const screenHeight = canvas.height


模拟器内正常



手机预览按钮,文字比例不正常,事件焦点完全无法触发



开发工具提供的射击游戏范例也是如此,模拟器内显示正常



手机预览文字比例不正常,事件焦点,检测碰撞安全不正确,事件完全无法触发


若将宽高变量恢复为

const screenWidth  = window.innerWidth

const screenHeight = window.innerHeight


则显示变形




希望能得到解答,谢谢!

6 回复

提供一个粗暴解决办法。。 模拟器比例会歪 但反过来真机比例会好。

感觉是canvas实例的时候,真机切换横屏还没执行完毕,导致canvas是按照竖屏比例。

模拟器切换横竖屏很快,所以没有这个问题。

希望能有一个注册监听横竖屏切换的接口。

测试机型 iphone7 plus

var canvas = wx.createCanvas()

GameGlobal.innerWidth = canvas.height

GameGlobal.innerHeight = canvas.width

canvas.width = GameGlobal.innerWidth

canvas.height = GameGlobal.innerHeight

有办法解决解决这个问题吗

给后人看吧。需要重新设置canvas宽高。

canvas.width= window.innerWidth

canvas.height= window.innerHeight

开发者工具模拟器上均正常,只有手机ios不正常,安卓也正常

有办法解决解决这个问题吗

开发者工具上选择的模拟设备型号是?

你多切换几款,看下是否会出现真机一样的问题?

回到顶部