Non scrolling fullscreen on mobile

RaphMD · May 2016

Hi guys :) !

I'm trying to achieve a similar result as the p5js mobile examples, as this one

I would like a fullscreen, non-scrollable canvas to be display on iPhones, Androids and so on.

By looking at the source code of the p5js.org page, I understood that an iframe is part of the answer. That does it for the non-scrollable part. But using createCanvas(displayWidth, displayHeight) gives me a tiny canvas on an iPhone 6. Less than half of the size of the screen.

Here is my index.hmtl :

<html> <head> <meta charset="UTF-8"> <style> html, body { overflow: hidden; margin: 0; padding: 0; background:white; } </style> </head> <body> <div id="sketchDisplay"> <iframe id="sketchFrame" src="sketch.html" style="display: inline; position: fixed; border:none; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999;"></iframe> </div> </body> </html>

And my sketch.hmtl :

<!doctype html> <html> <head> <script type="text/javascript" src="libraries/p5.js"></script> <script type="text/javascript" src="sketch.js"></script> <script type="text/javascript" src="socket.io-1.4.5.js"></script> <style> html, body { overflow: hidden; margin: 0; padding: 0; background:white; } </style> </head> <body> </body> </html>

I guess I'm missing some magic there.

Could somebody help me :) ?

blindfish · May 2016

I'd be surprised if you really need the iframe: in your CSS why not just set your canvas position to fixed or absolute; top/left to zero and width/height to 100% ;)

There's obviously a little more to it than that - for example setting appropriate metadata such as viewport - which you've apparently missed. Other considerations include:

what happens when device orientation changes...
setting sketch to displayWidth/Height may affect performance: you may want to set a maximum sketch size and rely on CSS to stretch across the whole screen (at the cost of some sharpness)
changing things like level of detail depending on the performance of the mobile device.

gergelysuto · June 2016

Thank you for the interesting topic. This also can come in handy (in order to avoid unwanted browser refresh): http://stackoverflow.com/a/35213601

Howdy, Stranger!

Categories

In this Discussion

Non scrolling fullscreen on mobile

Answers