729941 - MAPLE: BrowserQuest exceeds the screen limit in portrait mode

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Catalin Suciu [:csuciu]]

Attachment: Screenshot

Maple 13.0a1 (2012-02-23)
Nightly 13.0a1 (2012-02-23)
Samsung Galaxy SII (Android 2.3.4)

1. go to http://paulrouget.com/mwc-demos/browserquest/client/
2. click on Play

Expected: BrowserQuest should fit to screen in portrait mode 
Actual: BrowserQuest exceeds the screen limit in portrait mode

Please see the attached screenshot.

Comment 1

[Martijn Wargers (dead)]

Paul, is this a problem in BrowserQuest itself or with Maple? Catalin, Can this be reproduced on the regular nightly too?

Comment 2

[Cristian Nicolae (:xti)]

(In reply to Martijn Wargers [:mw22] (QA - IRC nick: mw22) from comment #1)
> Paul, is this a problem in BrowserQuest itself or with Maple? Catalin, Can
> this be reproduced on the regular nightly too?

This issue is reproducible on the latest Nightly build.

--
Firefox 13.0a1 (2012-02-29)
Device: Samsung Galaxy S2
OS: Android 2.3.4

Comment 3

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

dup of bug 732564

Comment 4

[Kartikaya Gupta (email:[e-mail])]

Please mark bug 732564 as a dependency rather than duping. This (and the other dependent bugs) will have to be re-tested after bug 732564 lands.

Comment 5

[Kartikaya Gupta (email:[e-mail])]

So BrowserQuest sets a meta viewport tag with width=device-width, which on the Galaxy Nexus we provide as 360 pixels (it's actually 720 pixels, but because it's a high-density display we use a default zoom of 2.0, giving us an effective 360-pixel width). BrowserQuest itself expects a viewport larger than 360 pixels, so it appears cropped (same as if you resize your desktop browser window to 360 pixels wide). The proper fix is to have BrowserQuest modify the viewport tag to specify the actual pixel width that it wants.

This bug is also going to be device-dependent; on some devices (e.g. Galaxy Tab 10.1) this is not a problem because we have a device width of 800 pixels and low-density display so we provide the full 800.

Comment 6

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

Still occurs on Galaxy Nexus, Galaxy S II, Droid Pro, HTC Desire HD; Nightly 3/28/2012

Comment 7

[Kartikaya Gupta (email:[e-mail])]

Moving to evangelism, since the webpage needs to change to fix this properly.

Comment 8

[Mike Taylor [:miketaylr]]

Changing URL to http://browserquest.mozilla.org/ as the one hosted on paulrouget.com doesn't seem to connect anymore.

Comment 9

[Mike Taylor [:miketaylr]]

Also it seems like the behavior has changed since this was reported (though I can't verify since I've never played this before today):

There's a MQ that shows an image that prompts you to change the orientation of your phone if the viewport is narrower than 640px:

@media screen and (max-width: 640px) and (orientation: portrait) {
        #portrait {display:block;height:300px;width:300px;position:absolute;top:70%; left:50%; margin:-150px 0 0 -150px;}
...
    }

Comment 10

[Mike Taylor [:miketaylr]]

Attachment: 2013-10-11 19.11.58.png

Comment 11

[Mike Taylor [:miketaylr]]

Based on this info, I'm going to resolve as fixed. Please reopen if anyone can reproduce the original problem.