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.
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.
This is the same media query I've used for all my other WordPress sites but for some reason it's not working for this particular site.
Often I can get away with just using:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){}
But I've tried that, and I've tried:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {}
But neither are registering. It's not a cache issue, either.
Additionally, for some reason when I inspect the site, everything lists as being received from site/style.css:1 even though my code is around line 604.
It was retrieving the css from all of the desktop styling, so as a test I added #media only screen and (min-width: 1025px) {} to my desktop styling, just to cancel it out, and sure enough, now my landscape header is all reverted back default styling (full sized image, default h1 styling, etcetera). Nothing I do triggers the landscape media query, even though the rest are called without any issues at all. I'm about to pull my hair out, and I can't find anything else on Google that quite fits as a solution.
The mobile and iPad Portrait media queries are working perfectly.
Any help is appreciated!
As I can't comment yet:
Do you use any sort of minifying? And are you sure that your .css file has no errors? With both these questions I'm referring to the style.css:1 thingy.
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 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'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.