[p5.js] Is it possible to edit the 'initial-scale' of 'meta[name=viewport]'?

p5.js Coding Questions
1

Is it possible to edit the ‘initial-scale’ of ‘meta[name=viewport]’?

through ‘js’

*link: html - Change initial scale with javascript - Stack Overflow

  if (document.documentElement.clientWidth < 480) {
     document.querySelector("meta[name=viewport]").setAttribute(
           'content',
           'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
  }

through ‘p5.js’

   cbox= select('meta[name=viewport]');
   cbox.ele.initial-scale=1.0; // <- This error.

Any solution?

2
  1. cbox.ele.initial-scale = 1.0 is invalid JavaScript because you can’t have a hyphen (-) in an identifier.
  2. Even if you used correct syntax: cbox.ele['initial-scale'] = '1.0' this would have no effect because you would be setting a property on the HTMLElement which would not do anything meaningful to the DOM, as initial-scale isn’t as supported attribute on the meta tag.
  3. The equivalent p5.js code would set the content attribute of the element in question:
   cbox= select('meta[name=viewport]');
   // EDIT: removed typo: cbox.ele
   cbox.attribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

See p5.Element.attribute()

1 Like
3

Dear KumuPaul / @KumuPaul

[P5.JS]

function setup() {

  createCanvas(600, 1100); 
  
  cbox= select('meta[name=viewport]');
  cbox.ele.attribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
  
  background(0);
  
}
function draw() {   
  
}

[HTML]

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="TEST_SIZE_EXAMPLE.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>
<body>
</body>
</html>

It doesn’t work.

cbox.ele.attribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

doesn’t seem to be working.

4

Sorry there was a typo in my code:

   cbox= select('meta[name=viewport]');
   // Note: calling attribute on cbox, not cbox.ele
   cbox.attribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
1 Like
5

@KumuPaul

very very Thank you.

but,
I have one question.

case 1
<meta name="viewport" content="width=device-width, initial-scale=1">

case 2
<meta name="viewport" content="width=200px, initial-scale=0.5">

case 3
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

No matter how much I change the html, is it the same as what I see on a real smartphone?
I can’t understand.

6

I suggest you read this page on MDN for an overview of how this setting is used. If you’re still struggling you should make a separate post outlining the specific layout you are trying to achieve on mobile, and sharing code with your best attempt.

7

A very basic example would be:

https://testing.free-side.net/test-initial-scale.html

vs.

https://testing.free-side.net/test-initial-scale.html?mobile=true

The former uses the default viewport width, and as a result renders the text very small. The later uses device-width (via the p5.js code to dynamically set the veiwport settings) and should show the text zoomed in to a more natural size and scrollable horizontally.

2 Likes
8

@KumuPaul

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="TEST_ARRAY_TEXT.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style.
       You might only need one of these values set. -->
  <style> body { padding: 0; margin: 0; } </style>
</head>

<body>
</body>
</html>

initial-scale=1.0

Even if you change ‘initial-scale=1.0’ and access the site with a smartphone, the displayed screen is the same.

I don’t know why.

9

@KumuPaul

I think you’re right.

It seems it’s an internet ‘cash memory’ issue that ‘initial-scale=1.0’ doesn’t change.

Thank you for answer.