Problems with targeting devices - media-queries.css

[alefmemalef]

Hi,

I have created a media-queries css file but have been struggling with it for weeks, as I suspect that some of my media queries clash. Sometimes changes I make to iPhone5 portrait affect the way the site appears and sometimes changes I make are completely ignored.

These are the media queries I defined:

For 800x600 screen:

@media only screenand (min-width: 769px)and (max-width: 800px)and (max-height: 600px) {

For iPad2 landscape:

@media only screen and (width : 1024px)and (height : 768px)and (orientation : landscape) {

For iPad2 portrait:

@media only screen and (width : 768px)and (height : 1024px)and (orientation : portrait) {

For iPad2 Air landscape:

@media only screen and (width : 1024px)and (height : 672px)and (orientation : landscape) {

For iPad2 Air portrait:

@media only screen and (width : 672px)and (height : 1024px)and (orientation : portrait) {

For iPhone5 landscape:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px)and (device-aspect-ratio: 40/71) and (orientation : landscape) { 

For iPhone5 portrait:

@media only screen and (max-device-width : 320px) and (max-device-height : 568px)and (device-aspect-ratio: 40/71)and (orientation : portrait)  {

I started with the very straightforward queries given here:

http://stephen.io/mediaqueries/

and introduced more and more features as part of my struggle... I played around with changing between min-height, height, max-height and min-width, width, max-width.... I tried an endless number of changes and my client is about to sue me (and they're a big firm of lawyers...)

I also created many more queries to target iPhone 3G, iPhone4, GalaxyII, Nexus, Xperia.... but thought that the clashes were caused by them so removed them.

Anyway, bottom line - HELP!!!!

Thanks

[newseed]

I think you are over using your media queries. You should not have to use width or max-width but instead just min-width. You also do not have to use height of any kind.

 

The first thing is setting up your site to appear correctly for 320px which would be your standard css and then you use media queries for higher screen pixels. Naturally, the media queries stuff should come after the standard css.

 

All your standard css should satisfy how it looks for Iphone. Then you set media queries for all other smartphones, then tablets and then desktop. So for Iphone you would set the design to fit 320px width which is portrait view.

 

Now the media queries:

 

@media (min-width: 360px) { } /*this will satisfy all smartphones that have min resolution of 360px (mostly portrait)*/

 

@media (min-width: 480px) { } /*this will satisfy all smartphones that have min resolution of 480px (mostly landscape)*/

 

@media (min-width: 550px) { } /*this will satisfy Iphones in landscape view that have min resolution of 550px)*/

 

**note: Iphones differ in screen sizes and so the above media query is used to satisfy the landscape view

 

@media (min-width: 640px) { } /*this will satisfy most tablets that have min resolution of 640px (mostly portrait)*/

 

@media (min-width: 768px) { } /*this will satisfy most tablets that have min resolution of 768px (mostly landscape)*/

 

@media (min-width: 992px) { } /*this will satisfy most tablets that have min resolution of 992px (mostly landscape) and some desktops/laptops*/

 

You can keep add more but as you can see that the smaller resolution should be listed first on up the desktop resolution. This should take care of almost all devices. However, you may find that one device is just not quite right because it has a different resolution.

 

Let's say that one phone resolution is 400px by 800px. You would add the smaller size first in between the two media queries like this:

 

@media (min-width: 360px) { } /*this will satisfy all smartphones that have min resolution of 360px (mostly portrait)*/

@media (min-width: 400px) { } /*special for a device using 400px*/

@media (min-width: 480px) { } /*this will satisfy all smartphones that have min resolution of 480px (mostly landscape)*/

 

And for the 800px (landscape):

 

@media (min-width: 768px) { } /*this will satisfy most tablets that have min resolution of 768px (mostly landscape)*/

@media (min-width: 800px) { } /*special for a device using 800px*/

@media (min-width: 992px) { } /*this will satisfy most tablets that have min resolution of 992px (mostly landscape) and some desktops/laptops*/

 

There are other methods in practicing media queries but I find using the above works best for me. Whatever you use, just remember to start at the smallest resolution and work your way up to the largest.

 

Finally, the example you've provided from that site is gearing towards apple devices only. You can no longer ignore the Android market.

Edited February 11, 2014 by newseed

[alefmemalef]

Thank you so much Newseed!! Wish I could have come across this information weeks ago....

I have a new problem though - the appearance of the website on the computer screen has been damaged now. I've tried giving the largest resolution I have a max-width as well but it hasn't helped.

How do I make media-queries.css not affect the appearance on my computer screen?

[alefmemalef]

Hi, I found out that I do need to give a max-width to each one of them that is 1px less than the min-width of the next size up. That fixed it.

[davej]

The question is -- what are you doing different for each of these width ranges? You only need to consider the width boundaries that are going to cause you to make a necessary reconfiguration of the layout.

[alefmemalef]

I'm doing quite a bit - img sizes, font sizes, different image sprites....

[newseed]

As with any design, it's best to keep it a simple as possible especially for mobile devices. The more you try to do things visually the more complicated it becomes.

[davej]

What I was hinting at is that the goal should be a responsive design that will adjust to any screen size, not just the ten most popular devices of today.