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
}
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 two different media queries, for iPhone and browser. But the iPhone don't work. The sequence is first browser and then iPhone in the style sheet. When i check the site on iPhone and inspect its shows the queries from browser, not from iPhone. What to do??
I saw this: iphone-6-and-6-plus-media-queries, But what i want is not there.
Browser:
#media only screen and (max-width: 640px) {
#my_div li a img { height: 51% !important; top: 19% !important;}
}
#media only screen and (max-width: 360px) {
.....
}
#media only screen and (max-width: 320px) {
.....
}
iPhone:
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
#my_div li a img { height: 31% !important; top: 14% !important;}
}
If you want to target Iphone 6 use;
#media only screen and (min-device-width : 375px) and (max-device-width : 667px)
add orientation only;
and (orientation : landscape) OR and (orientation : portrait)
For Iphone 6 plus use;
#media only screen and (min-device-width : 414px) and (max-device-width : 736px)
I think at your case -webkit-device-pixel-ratio is the reason of it not working.
where is the code for the iphone in the your css? because if it is above the code for the browser your browser code will write over it. if this is the case then you only need to turn it around.
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?
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?
I have the following media query:
#media screen and (max-width: 480px) {
When viewing the website in portrait mode on my Nexus 5, it looks the way I want. However, when I turn the phone over to landscape mode, it shows the full site and not what is specified within this media query.
Why is this happening? I've also tried:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
This did not resolve the issue.
Actually Nexus 5 Landscape width is 590px and you have given the max-width:480px....
See the view-port sizes
You can give the media queries like this also :-
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}
it should work for you... try with this
The nexus 5's effective screen dimensions are 360x598 so in landscape the viewport is wider than the highest end of your media query. You can capture the landscape orientation of the nexus 5 by increasing your max-width to 599px.
#media screen and (max-width: 599px) { ... }
reference