›

Non scrolling fullscreen on mobile

RaphMDRaphMD
edited May 2016 in p5.js

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 :) ?

Tagged:

Answers

  • blindfishblindfish

    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.
  • gergelysutogergelysuto

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

Sign In or Register to comment.