CODEWITHSUNDEEP
htmlreactjsscaleviewport
Alex Gurr
Alex Gurr

Reputation: 543

React - Viewport being ignored

In my index file I have the following:

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

I am using React to load the page, but the main index file is an HTML file. (.pug)

This is inserted correctly into the DOM. However, the viewport is ignored - my page is showing the desktop version.

If I edit the DOM in the Chrome dev tools, eg. change 1 to 1.0 or any other part of the meta tag, it causes the page to re-calculate the viewport correctly, and will then display correctly straight away. Any ideas?

You might need to click the image to see the GIF animation.

Animated example of issue

Upvotes: 6

Views: 6578

Answers (3)

Mujahidul Islam
Mujahidul Islam

Reputation: 563

Try using this. It works for me.

<meta name="viewport" content="width=device-width" initial-scale="1.00" maximum-scale="1.0" />

Upvotes: 3

SILENT
SILENT

Reputation: 4268

Try using meta(name='viewport', content='width=device-width, initial-scale=1.0') in your index.pug file.

Based on your code, try using meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0')

Upvotes: 4

falsarella
falsarella

Reputation: 12437

Well, you could try triggering the viewport recalculation manually on page load with, for example:

window.getComputedStyle(document.body)

Please, note that this is not the best solution. It should just be used while (or only if) the root cause issue is not found.

Upvotes: 0

Related Questions