1

How can I detect the Motorola Xoom browser with CSS Media?

e.g. for iPad, I use @media only screen and (device-width:768px)

What is the similar media query for the Motorola Xoom browser?

Florian
  • 3,145
  • 1
  • 27
  • 38
copenndthagen
  • 49,230
  • 102
  • 290
  • 442

2 Answers2

2
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) { … }

See: http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Nirmal
  • 9,391
  • 11
  • 57
  • 81
  • you swapped min and max accidentially – Florian Apr 23 '11 at 06:58
  • @levu - Ah thanks! I copied and pasted that buggy line from the about.com tutorial ;) – Nirmal Apr 23 '11 at 07:01
  • Thx a lot..I have 2 questions; 1. If I use the above media query, can I be sure that it will only target Xoom browser or there can be many with device width between 800 and 1280px 2. If I want to apply ipad.css and xoom.css for the same HTML file, can I be sure that using the 2 separate media queries, there will not be any incorrect coincidence and a wrong CSS gets applied to any of the device. – copenndthagen Apr 23 '11 at 07:12
  • Sorry to slightly divert a bit but I have a similar question related to CSS media query.I'll close out this as soon as I get an answer from answer this..See right now I am implementing for desktop.css and ipad.css and want them in 2 separate file..In desktop.css, I use @import url("ipad.css"); and also add @media not only screen and (device-width:768px) block which has the actual desktop styles..Now while the iPad CSS gets applied correctly on the iPad, for some reason the CSS for desktop does not get applied..Not sure what is worng with the "@media not only screen ..." . – copenndthagen Apr 23 '11 at 07:35
1

The screen resolution is 1280x800, so the width is either 1280 or 800:

@media only screen and (device-width:800px)

or 

@media only screen and (device-width:1280px)

So you can also use other layout depending on the device orientation.

Although, i wouldn't just rely on the device width. If you really want to detect the Xoom browser, your only possibility is to look at the user agent string, because there are many screens having this dimensions. For my websites i don't use special tablet versions, the tablet browsers are so good, they don't need extra care (unlike IE ;)). For my websites I design normal and mobile versions.

Florian
  • 3,145
  • 1
  • 27
  • 38
  • ok..Is Opera the browser for all Android tablets and if yes, will the same set of styles work correctly on all Android tablets ? – copenndthagen Apr 23 '11 at 07:20