空间小游戏iPhone X 适配注意事项

适配标准

1. 铺满全屏，安全区域不留灰色
2. 游戏可操作区域需要在安全区域以内

iphoneX安全区域

1. 竖屏游戏
   • 顶部44pt
   • 底部34pt
2. 横屏游戏
   • 底部24pt

如何全屏？

1. meta标签viewport添加属性值viewport-fit=cover
2. 注意事项
   1. 空间应用已经统一添加viewport-fit=cover
   2. laya游戏引擎会重写viewport属性，可以去掉重写逻辑

如何判断iphoneX

1. viewport = width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover
2. 样式判断，注意要配合1中的viewport设置，其它设置自行转换

   @media only screen
   and (device-width: 375px)
   and (device-height: 812px)
   and (-webkit-device-pixel-ratio: 3) {
      //针对iphoneX的样式
   }
   

本地开发chrome如何模拟

针对部分应用在iPhoneX独立版中没有铺满的问题处理

在iphone x上的WKWebView中，如果全屏页面设置height:100%, 页面没有铺满、会短一截。

1. 空间独立版将在7.7版本修复此问题
2. 当前处理方法参考：

https://stackoverflow.com/questions/47134329/wkwebview-page-height-issue-on-iphone-x

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait) { 
        html {
            height: 812px !important;
            width: 375px !important;  
        }
    }

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : landscape) { 
        html {
            width: 812px !important;
            height: 375px !important;
        }     
    }