Method and device for self-adaptive rotation of mobile terminal web game

Abstract

The invention relates to a self-adaptive revolving method of a mobile terminal web game, comprising: setting the web game in the block element of a container class; judging whether the web game is horizontal screen operation or vertical screen operation, monitoring and judging whether the mobile terminal is in the horizontal screen state through a monitoring event, revolving the block element for 90 degrees, wherein the block element is the block element in which the horizontal screen operation web game not in the horizontal screen state is located; setting the proportion of the height and the width of the block element according to the proportion of the width and the height of the screen of the mobile terminal. In addition, the invention also provides a self-adaptive revolving device of the mobile terminal web game. Compared with the prior art, the method and device of the invention enable the web game to be automatically revolved to the horizontal screen state when the mobile terminal is in vertical screen state, thus improving the game experience degree.

Description

technical field [0001] The invention belongs to the field of webpage game design, and in particular relates to a method and device for adaptive rotation of a mobile terminal webpage game. Background technique [0002] A web game is an online game based on a web browser, without downloading the client. For mobile terminals, it mainly refers to web games based on HTML5. The entity of the game is in the form of a web page. The built-in browser of software such as WeChat to display and play games. [0003] Web games will be designed in the form of horizontal screen or fixed screen, such as figure 1 As shown, the vertical screen browser game A means that the height of the game page is greater than the width, and the horizontal screen browser game B means that the height of the game page is smaller than the width. At present, most of our mobile terminals are mainly displayed in a vertical screen setting for the convenience of holding, that is, the height is greater than the widt...

AI Technical Summary

Problems solved by technology

If the mobile terminal has turned on the automatic rotation setting, the player only needs to rotate the phone, such as image 3 As shown, the webpage game page will also rotate accordingly, so that the webpage game can be operated normally in full screen according to the original design ratio of the webpage game; however, if the mobile terminal does not enable the automatic rotation setting, even if the player rotates the mobile phone, the webpage game will still be displayed according to the original ratio In the middle of the browser, such as Figure 4 As shown, the screen will still be small, which is not conducive to operation and viewing, which directly affects the experience of the game

Images