change viewport meta tag with jquery
Using jQuery you can do it like the following:
if ($(window).width() < 700) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}
EDIT
To have the viewport tag by default, then remove it above 699px:
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
jQuery:
if ($(window).width() > 699) {
$('head').remove('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}
Comments
-
AB. about 2 years
I was wondering if it is possible to add a meta tag using jquery to an html page before the page loads. The reason why I ask, is because I have a page with no viewport meta tag on and it should have it only when the resolution drops below 700px -
<meta name="viewport" content="width=device-width, initial-scale=1"/>The reason being, I have html markup for mobile site (using media queries) & also html markup for desktop version ( I don't have one for tablets). I want to make sure html markup designed for desktop is rendered properly on tablet on page load and also when we change the device orientation.
Thanks in advance!