I have my site optimized for OS and iOS, but testing it for Android through browserstack.com has left me puzzled about targeting Android devices in my media queries.
Here is my query that works for iOS devices:
#using em based query after reading this article: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
#media only screen and (device-width: 20em)
I have tried a variety of different queries (including px based queries), but just want one that will work for all / most handheld android devices. Have you had any luck with this? Thanks for your ideas.
Media queries can't be used to find device type, you should use user agent sniffing for this.
There is a good resource for media queries on CSS-Tricks though.
Please have look into the demo at http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
It seems like device-width: 20em would cause some problems. So have look here.
Assuming your 1em = 16px I would use the below media query
#media only screen and (min-device-width: 20em) and (max-device-width: 30em)
That would look for any screen device whose width is between 320px and 480px, which is a fairly good standard for mobile devices.
if you want to target Android using media queries, I think you can fake it by querying dpi.
#media screen and (min-resolution: 192dpi) { … }
Related
I have a problem with media queries using dev tools. Why if I select mobile my site (width 1440px) is displayed correctly while I select desktop the site is displayed differently? Is there a specific media query for the desktop devices? My result work only if I select mobile-device on dev tools. If I select desktop-device it seems to use the same version of the tablet query.
These are my queries:
#media only screen and (min-width: 768px) and (max-width: 1023px) -for tablet-
#media only screen and (min-width: 1024px) -for desktop-
Thanks
I resolved it is a "Live Server" extension problem. Maybe from last vs code update.
I'm developing my website locally and using Chrome to preview it as I go. While it's really easy to resize the browser to test media queries that use max/min-width, it's not possible from what I can tell to simulate max/min-device-width with any built in settings. Is there a Chrome extension that will simulate a mobile device and trigger media queries, specifically max/min-device-width and also orientation:portrait/landscape?
I basically would like some way to test this media query with Chrome on my computer rather than a smartphone:
#media only screen and (max-device-width: 600px) and (orientation: portrait)
Mobile device emulation is available as a built-in feature for Chrome, currently in the Beta channel. You need to enable it in the DevTools settings.
Give this one a try...I think it's exactly what you need...
https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep?hl=en-US
As new phones have a really big resolution display (ex: 1280) I'm wondering what is the smartest way to do a CSS media query dedicated ONLY to Phones with 1280.
The issue I have is that if I do this :
#media only screen and (min-width:1136px) and (max-width:1280px)
I will include some desktop reslutions sizes and I want to have a different UI between desktop view and mobile view.
Is there any good practice/solution somewhere for this ?
Thanks a lot !
A great way to target devices like smartphones would be to use min-device-width and max-device-width, e.g.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Smartphone queries here */
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* iPad queries here */
}
Alternatively, you could use Detect Mobile Browsers for mobile/tablet detection.
for the mobile devices just try to check min-device-width and/or max-device-width.
Another possibility is to check the pixel ratio of the device you're targeting
User agent sniffing.
This is not good practice, but if you sniff for useragents serverside and serve different content (html/css/js) to the client (phone, desktop) it works.
Better you should ask yourself what features your UI is designed for, like touch, screen size etc. To detect this you can use CSS media queries and http://modernizr.com/
i have seen the answer here on how to get the media query of iPhone5
#media
only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (device-height: 640px),
only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (device-width: 640px) {
/ iPhone only /
}
Problem is, i have tried several web based simulator for ipod touch, iphone4 and iphone 5.. they are not just accurate. i don't own any of this devices so how can i know if the div is aligned right or if it's showing right on those devices.
There is no substitution for the real thing.
Ask one of your friends to borrow their phone, or go into the local Apple Store (or retailer) and ask to try out the phone and visit your site to check.
If you're developing locally then copy your code across to http://codepen.io so that you have access from the store.
I guess i found an alternative for this.
Use Google Chrome Inspect Element --> Settings --> User Agent.
Per Apple's developer instructions, I am using the following CSS to affect only iPads and iPhones. However, the CSS seems to be affecting older browsers as well (e.g., Firefox 3.5). Any suggestions on how to target only the iPad/iPhone or only target Firefox 3.5, but not both?
#media screen and (max-device-width: 1024px) {
{...}
}
The Media Queries are based on screen size (among other things). To target the iphone you need to change your query to something like:
#media screen and (max-device-width: 480px) {
{...}
}
This will only target devices with a max display resolution of 480px
You can read more here: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
And I would definitely check out the new Responsive design book from A Book Apart - really really good