CODEWITHSUNDEEP
javascriptjquerydevice-width
Thomas
Thomas

Reputation: 63

Browser width for mobile

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?

Upvotes: 2

Views: 2393

Answers (1)

pearpages
pearpages

Reputation: 21917

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

Upvotes: 1

Related Questions