2

I have a Nexus 5, and when I go to http://ryanve.com/lab/dimensions/, it tells me that my width 360. I understand that there is a difference between my phone's resolution and the width of my browser.

However, when I write a function to change at under 767:

function detectmob() {
    if($(window).width() <= 767) {
        return true;
    }

    else {
        return false;
    }
}

if (detectmob()){

}

else {

}

It doesn't work on my phone. If I resize my browser window width to be <= 767 on my laptop, the function works correctly. When I view it on my Nexus 5, it doesn't.

Could anyone help me write a function to target mobile devices using the browser width?

Thomas
  • 63
  • 8

1 Answers1

1

When you visit a website via a mobile browser it will assume that you're viewing a big desktop experience and that you want to see all of it, not just the top left corner. It will therefore set the viewport width at (in the case of iOS Safari) 980px, shoe-horning everything into its little display.

The Viewport Meta Tag

Enter the viewport meta tag, introduced by Apple, then adopted and developed further by others.

It looks like this:

<meta name="viewport" content="">

Within the content="" you can enter a load of comma delimited values, but we're going to to focus on the fundamental ones for now.

For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:

<meta name="viewport" content="width=320">

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

pearpages
  • 18,703
  • 1
  • 26
  • 27
  • I see, thanks for the response and the link. My problem is that I am using this as my meta tag: `` – Thomas Jan 19 '15 at 19:37
  • My goal is to only load js on browser widths of more than 767px. – Thomas Jan 19 '15 at 19:42
  • Use CSS media queries? I don't think it's possible to have a media query control a javascript function, unless there's a method I'm not aware of. – Thomas Jan 19 '15 at 19:46
  • 1
    http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript – pearpages Jan 19 '15 at 19:50
  • I just put it in: `var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if (w <=600) { } else { }` But I'm getting the same issue. – Thomas Jan 19 '15 at 20:16
  • The solution is there, you have to play with the viewport. But if you get exhausted there are easier solutions, for example: http://verge.airve.com/, http://getbootstrap.com/css/#grid – pearpages Jan 19 '15 at 20:31
  • Got it. Based on what you've given me I'll be able to figure it out I'm sure. Thanks. – Thomas Jan 19 '15 at 20:33