Condition based on if mobile or otherwise unknown browser

Question

I have a form that shrinks responsively based on the window size. However, we need it to permanently stay small on mobile and otherwise unknown browsers.

This is the psuedocode. jQuery is fine, too, and I'm using v.1.8

if ( is_desktop )
    is_narrow = false;
else
    // applies to mobile and unknown browsers
    is_narrow = true;

$( "#form" ).toggleClass( 'narrow', is_narrow );

Most of the solutions out there fail on unknown browsers. For example, they only detect if the browser is mobile, and assume it is a desktop otherwise. I need to assume mobile unless proven to be a desktop browser.

P.S., I'm also using PHP if you want to offer a solution in that instead.

Why not stick with responsive design instead? http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile — Tchoupi, Mar 18 '13 at 20:04
The problem is that we have a widget that goes on others' sites. And we need the narrow form on mobile for the smaller screen. Since the resolution of the window is reported as larger than the screen size actually is, we have to detect it with other means. — redolent, Mar 18 '13 at 20:07
What about using media queries based on the dimensions of the page? — Vivek Ghaisas, Mar 18 '13 at 20:09
$(window).width() returns a large number, not the size of the device's screen. — redolent, Mar 18 '13 at 20:11
Since it's a widget, I can't add the proper `` tags in the header. — redolent, Mar 18 '13 at 20:13

Adil Shaikh · Accepted Answer · 2013-03-18T20:22:00.213

Try using Media Queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Use this function to determine if user is on mobile

 function is_mobile() {
        var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
        for(i in agents) {
            if(navigator.userAgent.match('/'+agents[i]+'/i')) {
                return true;
            }
        }
        return false;
    }

if ( is_mobile )
    is_narrow = true;
else
    // applies to mobile and unknown browsers
    is_narrow = false;

$( "#form" ).toggleClass( 'narrow', is_narrow );

EDIT:

You can try using this function :

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

But what about if we're not sure whether they are on mobile? How do we err on the side of showing the narrow form? — redolent, Mar 18 '13 at 20:12
Unfortunately, you've changed the logic from `is_desktop` to `is_mobile`. I essentially want to check for desktop browsers, and assume the rest of the world is mobile. — redolent, Mar 18 '13 at 22:24

score -1 · Answer 2 · edited Mar 18 '13 at 20:31

-1

You can use Query media with a little work on CSS. About the HTML, you can insert the the two form option with hidden/visible class attribute that related to some query media for desktop/mobile.

edited Mar 18 '13 at 20:31

toxotes

1,386
14
20

answered Mar 18 '13 at 20:05

Chen Reuven

79
9

1

This is a very poor answer. Include links, examples to support your answer, and please, it doesn't take that long to spell `you`! – Tchoupi Mar 18 '13 at 20:28
Just FYI, contributions here are held to fairly high standards, and answers that don't meet them tend to be downvoted or removed. Please read through http://stackoverflow.com/questions/how-to-answer to get a sense of what the community finds useful, in terms of an answer's content and style. – toxotes Mar 18 '13 at 20:36

Condition based on if mobile or otherwise unknown browser

2 Answers2