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/
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 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) { … }
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.
I'm currently trying to make some CSS changes to the mobile edition of a website using the Wordpress theme Responsive by ThemeID. I've spoofed my user agent to a Samsung Android, but this site still displays as if it were a desktop. When viewing it on an actual mobile device, the theme changes.
I'm sure I've spoofed my UA correctly because Google, Youtube, Yahoo, MSN, Stack Overflow, etc. all respond to my browser being mobile. Does this theme not really have a mobile view or something?
The theme format is controlled by CSS media queries. No need to forge a UA, just resize your desktop window to a narrower width to invoke the mobile view.
Theme indeed uses Media Queries breakpoints and they will adjust and adapt the layout to any* viewing environment.
Responsive breakpoints are:
#media screen and (max-width: 980px) {}
#media screen and (max-width: 650px) {}
#media screen and (max-width: 480px) {}
#media screen and (max-width: 320px) {}
#media screen and (max-width: 240px) {}
Thanks,
Emil Uzelac
P.S. We have a dedicated support forum, just in case that further assistance is needed.
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