CODEWITHSUNDEEP
javascriptmobile
tkbx
tkbx

Reputation: 16305

Determining device based on screen size?

I'd like to have a main desktop website, and be able to redirect to mobile and TV sites. I found some code online for the mobile site, but I'm not sure how to do it for TV. Here's for mobile:

<script type="text/javascript">
if (screen.width <= 699) {
document.location = "index-mobile.html";
}
</script>

My thinking for TV is screen.width >= 1280 (standard widescreen width for 720p), but even the smallest computer screens would also be included in this. Is there a way to do this well without using user agent, as I want to include all game consoles, set top boxes, smart tvs, etc, and I can't get the user agent for every one. I thought of doing screen.height == 720 or screen.height == 1080, but this would include some monitors and exclude some international TVs.

Upvotes: 0

Views: 269

Answers (2)

Jack
Jack

Reputation: 508

I had to deal with a similar problem to do with screen sizes on mobile devices recently. 51Degrees.mobi has an open source Java solution which can handle screen size detection. The API is pretty easy to implement and they have a guide here. I basically adapted the code in their guide to handle screen size: 

public static void main(String[] args) {
    Provider p = null;
    try {
        p = Reader.create();
    } catch (BinaryException e) {
        e.printStackTrace();
    }

    BaseDeviceInfo b = p.getDeviceInfo("ENTER USERAGENT HERE");
    String width = b.getFirstPropertyValue("ScreenPixelsWidth");
    String height = b.getFirstPropertyValue("ScreenPixelsHeight");
}

This will get you x and y screen resolution values which you can then work with. I believe their premium version can detect TVs/Consoles. Hope this helps.

Upvotes: 0

marteljn
marteljn

Reputation: 6526

Here is an approach you may be able to use to accomplish your goal:

http://modernizr.com/

Modernizr is a feature detection library. It is generally a better practice to implement feature detection as opposed to device detection.

I would advise against using screen height and width due to the immense number of possibilities. If you rethink your approach to distinguish based on features you may be able to rely on a layer like Modernizr to handle the complexities for you.

Example

Here is an example of Modernizr using media queries:

if(Modernizr.mq("only handheld") === true){
  //Redirect to mobile site
}else if (Modernizr.mq("only tv") === true){
  //Redirect to TV
}else{
  //Anything else to the desktop
}

Here is a media query reference. I'm not sure on the support of the media queries I used but if you take a look below you may be able to make this work for you.

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Upvotes: 3

Related Questions