html5游戏长宽设置

为了防止游戏时页面进行缩放,会设置viewport的宽度为设备宽度。设置了viewport的宽度为设备宽度后,满屏的分辨率和物理设备的真实分辨并不相同。这里进行了dpi缩放,无论android设备还是ios设备。


竖屏时,除了三星的大屏手机为360,绝大部分手机的width都为320,但height并不相同,横屏时,width不相同,height也不相同。取决于设备。我拿了几个设备进行了测试,结果如下。


竖屏时      横屏时     分辨率      尺寸    操作系统       手机

320|356   480|208   960*640   3.5寸   ios6.1           iphone4

320|533   533|320   800*480   4.3寸   android 4.0  酷派_5860s
320|426   480|266   480*320   3.2寸   android 2.3  htc_g13
320|480   533|267   800*480   3.7寸   android 2.3  htc_g12

320|401   480|241   480*320   3.5寸   android2.3   华为u8650

360|567   640|287   1280*720 5.5寸   android4.1   samsung_galaxy note2


现在流行将游戏设计成竖屏,宽度设为320,高度设为416、440或480。高度为416的,在320*401的低端android下,刚好满屏(不隐藏地址栏)。横屏的话,喜欢设置480*268,480*280。或者设置一张平铺的背景图,然后缩放游戏根节点,然后按比例缩放长宽,同时对鼠标或touch事件时的事件坐标进行缩放。


为了防止双手操作时,硬件厂商对浏览器行为做的一些特殊定制,游戏操作最好选型为单手操作的游戏。





原文地址:https://www.cnblogs.com/cly84920/p/4426463.html