Dynamic change of the meta viewport tag

Question

Dynamic change of the meta viewport tag

Navigation

#1 by (0 votes)

1

Is it possible to change the viewport of a page and have immediate effect without having to update it?

Assuming I have the following viewport on the page to show on mobile devices (smartphones and tablets):

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

So, I have a button at the bottom of the page, type Full Version which, when clicked, calls a JavaScript (or jQuery) function that changes the% to 1024 pixels wide. Does this change in the width property via script already change the pageview right away or need to do a reload ?

Another thing: the viewport with width defined in pixels, must contain <meta> or just the number (eg px or width=1024, )?

javascript html jquery meta-tags

asked by anonymous 11.11.2017 / 02:33

1 answer

File Upload on Tomcat Server Generate custom report with Python

score 0 · Accepted Answer

This response applies to mobile devices.

I noticed that by dynamically changing viewport to a fixed width, the screen resolution changes, but the content does not fit the width.

Image with viewport="device-width..." :

ResultafterclickingtheFullVersionbutton:

However,itworksperfectly,thatis,changetheviewportfixedvalue(width=1024)tomobilemode(width=device-width...).

Conclusion:

Youneedtorefreshthepagesothatthecontentofthepageconformstoviewport.Inthiscase,itwouldbenecessarytosavethenewvalueofviewporttoavariable(eg,SESSION,localStorage...)andrefreshthepageandrenderwiththenewviewport.

ExampleusingSESSIONwithPHP:

<?phpif($_SESSION['viewport']=="desktop"){
?>
<meta name="viewport" content="width=1024...
<?php
}else{
?>
<meta name="viewport" content="device-width...
<?php
}
?>

Example using% with% of JavaScript:

<script>
if( localStorage.viewport == "desktop"){
   document.write('<meta name="viewport" content="width=1024...');
}else{
   document.write('<meta name="viewport" content="device-width...');
}
</script>

When setting a localStorage value in viewport , you should not use width (as examples above).