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?
#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
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.
Related
I am relatively new to responsive web development and I've been confused on media queries for a while.
How does this:
#media screen and (max-device-width: 320px) {}
Become iPhone specific when it only targets screen size? Wouldn't many more devices become targeted by this?
I see references like this: http://stephen.io/mediaqueries/ and wonder why this is the standard.
And is there truly a way to target iPhone only versus Android only?
Much thanks.
A media query will work on all devices. This only detects the width of a screen and nothing more.
The site you were viewing was just showing specific sizes for multiple devices. An iPad screen may not be the same width as say a Android Tablet screen.
I have a Samsung Galaxy S3 Android Version 2.3 and am trying to change some media queries for it. I am using this:
#media only screen and (-webkit-device-pixel-ratio: 2) {}
Which seems to be working for Chrome on Android, but not the native Android Browser. I've looked at what would target this browser and it says 360px W, 567px H, -webkit-pixel-ratio:2, but it is not working. Does anyone know how to get this browser to behave?
Try setting the pixel ratio to 1.5. I haven't actually tested this, however, it looks like the density may actually be 1.5 for hdpi devices (hdpi is 240dpi so it has a 1.5 pixel density over mdli, the baseline, which is 160dpi).
#media only screen and (-webkit-device-pixel-ratio: 1.5) {}
If this turns out to be correct, perhaps the core browser is just being stricter than Chrome and requiring you to enter the exact value.
The following article has a bit more detail: http://developer.android.com/guide/webapps/targeting.html
I'm assuming the S3 uses hdpi graphics but if this is incorrect, the following Stack Overflow has a more complete list of pixel densities (Google's article is a little old so only goes up to hdpi): Android screen sizes in Pixels for ldpi, mdpi, hpdi?
Specifically, when testing my site on a Samsung Galaxy SIII I'm seeing the styles defined for the desktop.
How do you get the phone to use the mobile styles (with a 320px width in mind) or to utilize 'hide-for-small' class etc?
Currently, on that phone (and I figure retina display devices too) you'll not see .hide-for-small or global css being applied, only media queries for larger (768px and above) viewports.
Does anyone have experience making high DPI devices, i.e: (-webkit-min-device-pixel-ratio: 2) work with Foundation4?
Have you remembered to include the Viewport meta tag? The S3's viewport is 360x604, so if you're seeing styles for media queries greater than 360 on your portrait view, chances are you have your viewport misconfigured. I'd encourage the following viewport tag and #viewport directive (in your CSS):
<meta name="viewport" content="initial-scale=1.0">
#viewport {
zoom: 1;
}
Also take a look at this related question on the viewport meta tag on the S3.
I am having problem creating css media queries for smartphones, especially for Android devices such as Samsung Galaxy S3.
It seems like <meta name="viewport" content="width=device-width, initial-scale=1.0" /> and CSS media query gets different data on device-width.
If I hold my Galaxy S3 in portrait mode its screen is 720 x 1280, and it seems like content="width=device-width from meta viewport is giving me the same width.
But if I look at same page in landscape mode it seems like content="width=device-width from meta viewport is still giving me 720 width while listening to a bigger sized media query, so to speak 1280.
This results in web pages loading with a somewhat zoomed view, probably since it thinks that 720 is max width.
Check screens:
Galaxy S3 Portrait (Chrome)
Galaxy S3 Landscape (Chrome)
Above was tested on Samsung Galaxy S3 with Chrome browser.
I have a similar problem, actually worse with the default Android browser called "Internet". There it seems to ignore all CSS media queries while still listening to viewport.
Check screen:
Galaxy S3 Portrait (Default)
Try using a inspector in the phone to play around with values and tags or post us a demo. It's hard to point out the exact problem without any code attached to your question.
I'm currently working on a mobile version of a website which works great in the default browsers like Firefox & Chrome. Base is a fluid layout with a media query for a max width of 440px (#media screen and (max-width: 440px)to target portrait mode.
Font sizes are changing in the default browsers together with some other settings like smaller images and divs etc. However when I test the site on my HTC Android phone with the default browser it only shows the max width 440 style instead of the normal style which is based on a width of 480px.
What could be the problem for this behaviour? The mobile version can be found on httpp://www.seeyouzoeningouda.nl/m
Haven't posted the CSS because I really don't know which part of the code to show you. The css is based on the default HTMl5 boilerplate template (www.html5boilerplate.com)
What mobile devices have u used for testing ? If they are samsung galaxy s3 or apple iphone 4 then their device resolution has been doubled and hence this might be the cause for media queries not working.
So for I-phone 4 try to double the max-width from 480px to 960px and for samsung galaxy s3 if u double the max-width from 360px to 720px while writing the media query then it might work perfectly fine.
eg.
#media handheld, screen and (max-width: 960px)
#media handheld, screen and (max-width: 720px)
I think this might help you to target portrait mode.
Mobile device are sometimes targeted by #media handheld. Try using #media all instead of screen.