August 16th, 2013, 09:30 AM
Detect if Desktop browser
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?
August 16th, 2013, 10:25 AM
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.
August 16th, 2013, 11:33 AM
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
Originally Posted by web_loone08
August 16th, 2013, 12:13 PM