0

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

cpk
  • 809
  • 1
  • 6
  • 20

1 Answers1

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.

potato25
  • 186
  • 5
  • hey potato, thanks for your response. We ended up going the php route on this one and are using http://blog.mobileesp.com/?p=69 m-detect. Then just an if statement saying if m-detect is in use, use this meta attribute. Thanks – cpk Sep 16 '13 at 16:02