Jump to content

Landscape or portrait mode for html5 game


Recommended Posts

Depends on the type of game.

If you rely on keyboard input then you're likely targeting laptops/desktops, so landscape.

If you're targeting mobiles then portrait as web landscape is pretty poor in most mobile browsers and you can't lock the orientation for the web (this restriction doesn't apply if you're embedding your web tech into something like Cordova and releasing your app as a "native" application).

I'd guess mobile market is larger, but, it does depend on the type of game.

Link to comment
Share on other sites

Just to expand on mattstyles's answer, while it's true that you can't lock orientation for a web page, it's fairly easy to force a particular orientation by applying a css transform when width < height (or the either way around). Some js frameworks come with this feature out of the box, with some others you have to do it yourself - but even then, it's usually pretty simple.

Now whether you actually want to do that, is an entirely different matter. On a phone with a 2:1 aspect ratio, the address bar in landscape mode takes up a significant portion of the screen, so unless you go full-screen it can be pretty annoying. Much less so in portrait mode.

In general though, I think it depends on the game. Some types of games work better in landscape (rpg, strategy, etc), some others work better in prortrait (space shooter, match-3, pinball, etc).

Link to comment
Share on other sites

We've been locking orientation (and auto enabling fullscreen) on the web for years (while accepting it doesn't work in Safari or older Android stock browsers) - see 'window.screen' API.  Games look great in landscape, especially so for desktop, where (according to our web stats) most browser games are still played.  If targeting a particular mobile platform (e.g. Facebook Instant Games) then portrait may fit better to the users' existing habits - and that's the important part of the choice, make things work as the user expects them to.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...