TheFrenchieCake

Mobile Viewport and window resizing: canvas doesn't resize properly

Recommended Posts

Hello folks!

 

I'm developing a project which consists of a canvas and a set of menus and navigation tools to navigate into the scene. The project must be available both on desktop and tablet devices (not mobile phone). I have no problem with the desktop version of the project, but the tablet version causes some weird bugs I couldn't fix for now.

 

I test the mobile rendering of the website on Google Chrome Developer Tools with device mode activated (Google Chrome version: 41.0.2272.101). The problem is that, on viewport resizing, the canvas won't resize properly when the width of the viewport gets below 980 px. As my DOM body has a CSS width set at 100%, its min-width follows the highest width among its element. Every element of my body have a CSS width of 100% (including the render canvas). But the width CSS property of the canvas can't get below 980 px (at pixel ration: 1; 1960 px at pixel ration: 2; etc...). And so, the body CSS width get stuck at 980 px too... Also, as the width of the viewport gets lower than 980 px, the height property of the canvas gets higher. I tried a first workaround in the JS code, like this:

// engine: the engine used in the canvas// canvas: the DOM canvas element$(window).on("resize", function(){        var width  = window.devicePixelRatio * window.innerWidth;        var height = window.devicePixelRatio * window.innerHeight;        engine.setSize(width, height);        engine.resize();        canvas.width = width;        canvas.height = height;});

The result is that, even if the canvas in the HTML code gets the corrects width & height, the scene doesn't get the correct size! It looks like the scene is still stuck at 980px wide, and the height continues to rise. I tried a second workaround in the render loop, still in the JS code, like this:

_this.engine.runRenderLoop(function(){        _this._scene.render();        var width  = window.devicePixelRatio * window.innerWidth;        var height = window.devicePixelRatio * window.innerHeight;        _this._scene.width = width;        _this._scene.height = height;});

The result is... still the same situation. Can't set a viewport width below 980 px without getting this problematic situation, and the body doesn't fit into the viewport (you have to horizontally/vertically scroll to see the rest of the DOM body). You can easily reproduce this bug with any BJS playground code, with Google Chrome and device mode activated. Try to reduce the width of the viewport below 980 px and see what happens ;-) if you have any effective solution I'll be glad to see it! :-)

Share this post


Link to post
Share on other sites

While reading the Elvarion's tutorial for mobile HTML5 games, I stumbled upon the solution: just disable the zoom on mobile view! So, in your HTML code, add the following meta in the <head> of your page:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Try to resize the mobile viewport: everything's fine now :-)

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.