Difference between revisions of "P5js-desktop-and-mobile"

From Digipool-Wiki
Jump to: navigation, search
(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 Header
+
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);
  }