Monday, May 20, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
155
rated 0 times [  161] [ 6]  / answers: 1 / hits: 16891  / 10 Years ago, wed, august 27, 2014, 12:00:00

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!


More From » jquery
 Answers
42

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/>');

}

[#69641] Monday, August 25, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
irvingcarloe
Add To Favorites
Follow
Total Points: 677
Total Questions: 109
Total Answers: 96
Location: Svalbard and Jan Mayen
Member since Sun, Sep 25, 2022
2 Years ago
irvingcarloe questions
Wed, Aug 10, 22, 00:00, 2 Years ago
Fri, Jun 4, 21, 00:00, 3 Years ago
Wed, Mar 31, 21, 00:00, 3 Years ago
Tue, Aug 4, 20, 00:00, 4 Years ago
Fri, Jul 3, 20, 00:00, 4 Years ago
View All
;