Difference between revisions of "P5js-desktop-and-mobile"
From Digipool-Wiki
(Created page with " Add this to your Html Header <pre> <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> <style> body...") |
|||
Line 1: | Line 1: | ||
− | Add this to your Html | + | Add this to your Html header |
<pre> | <pre> | ||
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> | <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> | ||
Line 9: | Line 9: | ||
background-image: url('stripe.png'); | background-image: url('stripe.png'); | ||
} | } | ||
+ | </pre> | ||
+ | |||
+ | |||
+ | Add this to your p5js code | ||
+ | <pre> | ||
+ | // go 16:9 | ||
+ | if (windowWidth < windowHeight) { | ||
+ | // if portrait=mobil then use the full display height | ||
+ | createCanvas(displayHeight * 0.5625, displayHeight); | ||
+ | } else { | ||
+ | // if landscape=dektop then use the full window height | ||
+ | createCanvas(windowHeight * 0.5625, windowHeight); | ||
+ | } | ||
</pre> | </pre> |
Revision as of 18:41, 19 April 2020
Add this to your Html header
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> <style> body { background-image: url('stripe.png'); }
Add this to your p5js code
// go 16:9 if (windowWidth < windowHeight) { // if portrait=mobil then use the full display height createCanvas(displayHeight * 0.5625, displayHeight); } else { // if landscape=dektop then use the full window height createCanvas(windowHeight * 0.5625, windowHeight); }