排版问题请教

Creator 2.x
#1

  • 目标平台： 微信小游戏

  • 排版：竖屏

请教各位大佬，下图布局图和排版，能够适配竖屏手机？

目前测试在iphone6和比较窄的手机上，显示效果差距较大。

用widget的话，怎样调效果好？

微信图片_20200622165504.png399×843 181 KB

微信截图_20200622165533.png375×667 143 KB

#2

一般竖屏上的做法是 canvas 是勾选的 fit width，让宽度保持不变，高度进行延展，就没有这个问题，只需要处理 y 轴上的适配问题，看你的截图应该不是这种适配模式

坚持要截图这样的适配模式解决办法也很多的，比如用 widget 调整 item 的宽度和内部元素的间距

#4

非常感谢你给的建议。

我是creator小白，不知道什么情况下该用 fit width 或 fit height.这个是竖屏游戏，按你这么说用fit width最合适。

#5

的确 fit width 是最合适的，像这种列表，在更长的手机上只需要用 widget 拉长列表节点高度即可，显示的条数会增加。

一般都是默认 fit width，但一般除了手机还会需要适配平板，这种情况一般会用实际屏幕的 height 除以 width 得到屏幕比例，判断是否是平板，然后改成 fit Height 会更好适配

#6

适配高度的路过- -

只不过加了如下代码

//界面适配
main_bg() {
    if (cc.sys.isNative) {
        jsb.Device.setKeepScreenOn(true)
    }
    let cvs = cc.find("Canvas").getComponent(cc.Canvas)
    if (cc.winSize.height / cc.winSize.width > 2) {
        cvs.fitHeight = false
        cvs.fitWidth = true
    }
    let isIphoneX = 0
    if (cc.sys.os == cc.sys.OS_IOS) {
        var size = cc.view.getFrameSize();
        isIphoneX = (size.width == 414 && size.height == 896)
            || (size.width == 375 && size.height == 812);
    }
    if (isIphoneX) {
        cvs.fitHeight = true
        cvs.fitWidth = true
    }
},
#7

学习了，谢谢:nose::nose: