#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    77
    Rep Power
    2

    Detect if Desktop browser


    Hi All,

    I know this is a well covered and somewhat opinoated topic.

    A lot of resources online deals with the ability to detect if a browser is touch enabled, if certain api's are available etc. to evaluate whether a device is mobile or not.

    But all I really want to do is make sure that a desktop browser will have a wrapper width applied.

    To ellaborate - I have created a mobile website which looks great on iphone, ipad, and android. But when viewed on a desktop computer its not so nice. So I want to apply a width of 50% to the wrapper in case a viewer is on a desktop.

    A problem I have had with media queries is that retina and other hi res screens have as high a screen res as many desktops and laptops. So to my knowledge this method will not work (maybe im wrong)

    So what I would like to know is, if it is possible to detect if a user is on a desktop computer so I can apply the special css property?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    If I was you... and given that checking just for screen resolution, can be a bit unreliable; due to desktop screen dimensions, being similar in size to mobile devices..., I would use server side detection to check the user-agent. There are several pre-made scripts out there; that can do this, just do an online search for "server-side device detection" and you can see some options to choose from. As to the media queries issue; one way around that would be to check for a higher screen resolution (based on current desktop browser statistics); as more people are using screen resolutions of higher then 1024X768 (which was the common highest resolution for many years). Currently, as of right now; the most common desktop browser resolution is 1366X768 (followed by 1024X768). Granted this method; can be a bit unconvential; as some user who are still using browsers with screen resolutions below 1024X768; would be viewing your mobile layout, but that is just a small price to pay with this media query method. Although, in my opinion... I would use the server-side method.
    Last edited by web_loone08; August 16th, 2013 at 12:40 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    77
    Rep Power
    2
    Originally Posted by web_loone08
    If I was you... and given that checking just for screen resolution, can be a bit unreliable; due to desktop screen dimensions, being similar in size to mobile devices..., I would use server side detection to check the user-agent. There are several pre-made scripts out there; that can do this, just do an online search for "sever-side device detection" and you can see some options to choose from. As to the media queries issue; one way around that would be to check for a higher screen resolution (based on current desktop browser statistics); as more people are using screen resolutions of higher then 1024X768 (which was the common highest resolution for many years). Currently, as of right now; the most common desktop browser resolution is 1366X768 (followed by 1024X768). Granted this method; can be a bit unconvential; as some user who are still using browsers with screen resolutions below 1024X768; would be viewing your mobile layout, but that is just a small price to pay with this media query method. Although, in my opinion... I would use the server-side method.
    Ill give it a shot. Regarding the media query as you say, I belive also Ipad users with retina displays will get the desktop version since their display is greater than 1366x768
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by odp
    A problem I have had with media queries is that retina and other hi res screens have as high a screen res as many desktops and laptops. So to my knowledge this method will not work (maybe im wrong)
    Physical screen pixels are not always the same as CSS/logical pixels. In other words, different devices have different pixel densities, and to allow people to still be able to read text, e.g. in web pages, the device claims to have a smaller number pixels than it physically does. For example an iPad 3, which has a retina display, has a physical screen size of 2048x1536 pixels, but it reports the same 1024x768 that iPad 1, iPad2, and iPad Mini report.

    http://mir.aculo.us/2012/11/28/the-u...s-media-query/
    http://www.sitepoint.com/css-techniq...tina-displays/
    http://www.mobify.com/blog/ipad-3-an...commerce-site/
    https://developer.mozilla.org/en-US/...ce-pixel-ratio
    http://css-tricks.com/snippets/css/r...y-media-query/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo