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

Recommended Answers

All 12 Replies

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();
    }
});

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

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.

Also, check out CSS3 media queries (Google it). They're probably perfect for your situation!

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

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.

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?

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.

ok thanks for that!

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!

Will give it a go

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.