Guys there's a problem with media queries targeting iPad and Samsung Galaxy Tab2. Media Queries i wrote for SGT2 are over-riding iPad ones.
Media Query I'm using for iPad -
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
For Galaxy Tab2 -
#media only screen and (min-device-width : 600px) and (max-device-width : 768px) and (orientation : portrait) {}
Is there any way i can avoid this conflict?
Related
I'm currently working on a project where it needs to be user friendly for multiple devices but came across issues on devices themselves when targeting devices with one of the two viewport that a re the same and still not able to find a solution for it.
I am using media queries to archieve this, of course sounds far enough but there is no explanation online to separate an iPad mini with this syntax
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait) {}
And an iPad Pro
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : portrait) {}
I am testing with the Chrome devtool for devices and is fine when i start with the biggest ipad but when i then go on with the smallest(mini), it overwrite the previous changes because the css is read from top to bottom so i am so confused please guys can you help me to understand better this concept?
Also for mobiles i have this multiple lines of code one for each mobile (iPhone 5, 6 ,6+ but still same issues)
iPhone 5
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6+
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {}
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {}
Literally I don't know how to be more specific then this but also here the iphone 5 because is the last one in the css is overwriting some stile in the iphone 6 or 6+.
How about writing different style sheets for each device
I would use just min-width instead of min-device-width and similar. A 768px x 1024px device with retina display (iPad Mini) actually has 1536px x 2048px device pixels (if the pixel taio is 2:1), so you either have to use the true device pixel size or use CSS pixel size.
I have used this media query :
#media only screen and (min-device-width: 1366px) and (max-device-width: 1024px) and (orientation: landscape) webkit-min-device-pixel-ratio: 2) {}
but this code isn't working in chrome ipad pro extension. please any one help.
i think you have misplaced the values. try this :
#media only screen and (max-device-width: 1024px) and (min-device-width: 1366px) and (orientation: landscape) webkit-min-device-pixel-ratio: 2) {}
My question is that media queries is working fine in all the devices but the problem is coming in samsung glaxay tab10.1 while it is working fine in ipad etc please check my media queries
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
This is because the Samsung Galaxy Tab 10.1 resolution is 800x1280 and you're looking for devices between 768x1024 so this wont work
ideally you should do mobile first and something similar to these media queries
#media screen (min-width: 480px) {
//css goes here
}
#media screen (min-width: 768px) {
//css goes here
}
#media screen (min-width: 1024px) {
//css goes here
}
Right now I'm using these queries:
/*Desktop and laptops*/
media only screen and (min-width : 1224px)
/*Tablet landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
/*Tablet Portrait*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
I was wondering if I should change the first query to (min-width : 0px)
As you can see the other queries only work with landscape or portrait mode.
So if I make my screen smaller on laptop/desktop it doesn't use any CSS anymore.
What are your thoughts about this?
This does not work:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)
Make sure you've added to the head of the html page you're trying to edit with media queries.