Menu
I want some CSS code to target both iPad and desktop with max-width: 768.
This (I don't know why, would be glad to know) doesn't work for the iPad (only desktop):
@media only screen and (max-width: 768px)
so I had to to this for the iPad:
@media only screen and (device-width: 768px)
However, I have the exact same code inside both media queries, and that I cannot accept.
I tried this also:
@media only screen and (max-width: 767px) or (device-width: 768px)
This one above doesn't work either - it actually works for the desktop, no matter what width, and not on iPad. Really strange.
How to target both iPad and desktop with same media query?
633
The screen resolutions of different devices are listed below: Mobile (Smartphone) max-width: 480px. Low Resolution Tablets and ipads max-width: 767px. Tablets Ipads portrait mode max-width:1024px.
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}
In my experience, 320px, 768px, and 1200px are the most commonly used; these three values should be sufficient for targeting smart phones, tablets/laptops, and desktops, respectively.
You should use (min-width first): @media screen and (min-width:400px) and (max-width:900px){ ... }
I have used this. work for me in all device.
@media only screen and (min-width: 1024px) and (max-width: 1199px){
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
}
@media only screen and (min-width: 480px) and (max-width: 767px){
}
@media only screen and (min-width: 0px) and (max-width: 479px){
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
