收藏
回答

小游戏横屏配置后显示不正常

问题模块 框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
框架 小游戏 Bug 客户端 iOS 6.6.5 1.9.96

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


则显示变形




希望能得到解答,谢谢!


最后一次编辑于  2018-03-27  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

6 个回答

  • AP-Rich
    AP-Rich
    2018-08-10

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

    canvas.width= window.innerWidth

    canvas.height= window.innerHeight


    2018-08-10
    赞同 1
    回复
  • 李志毅
    李志毅
    2018-12-28

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

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

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

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

    测试机型 iphone7 plus

    var canvas = wx.createCanvas()

    GameGlobal.innerWidth = canvas.height

    GameGlobal.innerHeight = canvas.width

    canvas.width = GameGlobal.innerWidth

    canvas.height = GameGlobal.innerHeight


    2018-12-28
    赞同
    回复
  • 杨岱鑫🇨🇳
    杨岱鑫🇨🇳
    2018-06-02

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

    2018-06-02
    赞同
    回复
  • 秀秀
    秀秀
    2018-03-29

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

    2018-03-29
    赞同
    回复
  • 秀秀
    秀秀
    2018-03-27

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

    2018-03-27
    赞同
    回复
  • Special
    Special
    2018-03-27

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


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

    2018-03-27
    赞同
    回复 1
    • 银河眼の时空竜
      银河眼の时空竜
      2018-12-16

      有办法解决吗?至今依旧遇到这个问题

      2018-12-16
      回复