HI chaps, 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, maximum-scale=1, minimum-scale=1"/>
Any idea?
thanks
Violet_82 89 Posting Whiz in Training
minitauros 151 Junior Poster Featured Poster
Well I guess that would be possible :). Maybe something like:
$(window).resize(function()
{
// Do your width checks etc. here, check out the jQuery website for more info.
if(page_width < 700)
{
// Create <meta> tag.
$('head').append('<meta name="bla" content="test">');
}
else
{
// Remove the <meta> tag.
$('meta[name="bla"]').remove();
}
});
Violet_82 89 Posting Whiz in Training
thanks, but doesn't the above happen when the page has arleady loaded ? I am not entirely sure how the page evaluates meta tag, I assume it does it before the page load. So what I want ideally is to have the browser to determine the resolution or page width (say I am browsing the site from a mobile device) and if so loads the meta tag and therefore adapt the page to the device
thanks
minitauros 151 Junior Poster Featured Poster
Yes it does, when it resizes the <meta> tags are added, but I'm not sure how dynamically added <meta> tags work for search engine spiders etc.
minitauros 151 Junior Poster Featured Poster
Also, check out CSS3 media queries (Google it). They're probably perfect for your situation!
Violet_82 89 Posting Whiz in Training
thanks, unfortunately I need the meta tag to be added before the page loads - if it is possible at all.
Yes I am using media queries already, the reason why I wanted to add the meta tag on the fly is because I need a way for the browser to follow these content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 once the widt has been determined, and I don't know if I can do that with media queries
minitauros 151 Junior Poster Featured Poster
What you can do on the fly is $('head').append('<meta name="bla" content="test">'); :). If you don't put that in a $(document).ready(), then it will be executed while the page is being generated. E.g. if you put it between your <head> and </head> tags, the <meta> tag is created before your browser even parses the </head> tag, for as far as my knowledge goes.
Violet_82 89 Posting Whiz in Training
Ok I see, but am I right to suspect that each browser might implement it in a different way, as in some might not parse that js on time to assign the metatag before the page is load, in other words, is this guaranteed to work on every browser (including mobile ones?) as long as js is enabled?
minitauros 151 Junior Poster Featured Poster
I cannot say with 100% certainty that it works on every browser, but I wouldn't see why it wouldn't :). So yeah, I would consider it safe to use if I were to make a website with a smaller viewport.
Violet_82 89 Posting Whiz in Training
ok thanks for that!
minitauros 151 Junior Poster Featured Poster
Yea so dont use the window.resize() jQuery function then, but just check the viewport width while the page is being loaded :). And you're welcome!
Violet_82 89 Posting Whiz in Training
Will give it a go
Ajith_1 0 Newbie Poster
I have the same problem, could you please tell me how did you go about it?
Thanks in advance.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.