Add “width=device-width” in meta name=“viewport” if mobile phone

Question

need to add "width=device-width" in meta name="viewport" if mobile phone. trying to use this to no avail:

//iPhone Fix
jQuery(document).ready(function(){
    if (jQuery(window).width < 767)  {
        var meta = document.getElementsByTagName("meta");
        meta.setAttribute("width","device-width");
    }
}); 

If i dont set width="device-width" in the meta tag, site looks great on phones and media.css kicks in, but tablets become distorted. Any help would be great. Thanks

Answer 1

I think you have just a little error in your code, this should work:

//iPhone Fix
jQuery(document).ready(function(){
    if (jQuery(window).width < 767)  {
        var meta = document.getElementsByTagName("meta");
        meta[0].setAttribute("width","device-width");
    }
});

In your original code, you tried to use the setAttribute method on an array of elements and not an element itself. Hope this helps.