微信小游戏屏幕适配

作者: 何永峰；

标签: 屏幕适配

适配都是老生常谈，移动端要根据手机屏幕适配，PC端也有时候根据不同的电脑屏幕做适配，刚做的小鸡也要做适配。以下谈谈我根据需求做的小游戏适配方案吧

需要在不同的屏幕把我们的所有主要功能（大概就是7501334的这么大的内容）都展示出来

目前所有手机都有自己的屏幕比例，不可能做成每部手机展示出来的内容都一样，不多不少。我们的游戏是竖屏游戏，主要要在高度上作修改就OK

1、根据设计稿750 1334（一开始已经定死了，只能跟着设计稿走）作为主要展示内容

2、叫设计做一个750 1624的背景图，然后把750 1334的主要内容居中放在背景图上

2、设置游戏舞台高度750 1624（iphoneX是1125 2436，把宽高折成750 1624使宽度大小尽量变成设计稿大小来计算，方便）

3、获取当前设备的屏幕高度（宽度是750比例的高度大小，例如是1125 2436，折算成750 1624，拿1624当做屏幕高度），设备的屏幕高度 - 1334（主要内容高度）/ 2 = 上屏离主要内容的高度（一般是负数）

4、在Main添加皮肤的，把“上屏离主要内容的高度”设置为y值

4、这时候，大概展示是这样子

用 JavaScript 准确获取手机屏幕的宽度和高度

documentdocumentElementclientWidth; documentdocumentElementclientHeight;

这个得到的是设备像素可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320416(手机480 - 微信状态栏64), iPhone 5里为320504

小部分手机获取到的宽高并不正确。比如上面说的screenwidth screenheight这些数据在有的手机上并不准确

以上就是关于微信小游戏屏幕适配全部的内容，包括:微信小游戏屏幕适配、怎样用 JavaScript 准确获取手机屏幕的宽度和高度、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！