Question

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.

Answer 1

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