It seems like the Android Browser doesn't support (and breaks when using) min-resolution in a media query. I've read a bunch of sites suggesting using it for Android so I'm a bit confused why it's breaking my site.
This works (but also works in Android Chrome which is bad for my site):
#media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) { ... }
This excludes Chrome, but breaks default Browser too:
#media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) and (min-resolution: 144dpi) { ... }
Even setting it to 1dpi has the same effect.
Any ideas?
There are vendor prefixes for various browsers. I've used the following example on a number of sites without issue. Not that I included a min-width conditional as well, in case you need to combine several queries:
#media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5),
(min-width: 480px) and (-moz-min-device-pixel-ratio: 1.5),
(min-width: 480px) and (min-device-pixel-ratio : 1.5) {
/* ... Styles ... */
}
Related
We need to implement hover only for desktop but not to any other devices like (mobile and ipad).
#media (hover: hover),
#media (hover: none) and (pointer: coarse)
We have tried restricting using these media queries:
#media (hover: hover) and (pointer: coarse) {
.abc:hover {
i {
background-color: red;
}
}
}
I expect the output of Hover should not be observed in any of devices other than in desktop (mainly during swipe/ long press), but the actual output is it is breaking in few android devices like Samsung J8(Chrome version -77.0.3865.92, Android version-9).
What you can do is, this way the hover only works on screens atleast 1024px wide.
#media screen and (min-width: 1024px) {
// only put your hover in here
.abc:hover {
i {
background-color: red
}
}
}
I will develop a сross-platform mobile application. using Phonegap. My desinger ask me in how resolution must be application design maket, but i don't know. For iphone 2 variants: 640×960 and 640×1136 . What to choose for android? 720×1280 and 320×480? Help me!
Targeting Screens from Web Apps http://developer.android.com/guide/webapps/targeting.html
You basically have to target different device densities. E.g.
#header {
background:url(medium-density-image.png);
}
#media screen and (-webkit-device-pixel-ratio: 1.5) {
/* CSS for high-density screens */
#header {
background:url(high-density-image.png);
}
}
#media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
#header {
background:url(low-density-image.png);
}
}
For me dealing with multiple screens for phonegap android was a pain, so I build most of the UI using pure css.
Is there any way to target iPhones independently from Android devices and vice-versa with CSS media inquiries. This is for an HTML e-mail.
We've tried multiple methods, but they all seem to overlap.
We want to limit table sizes in devices with a max-device-width of 480, but only for Android based devices.
Below is what I've tried most recently. The iPhone (testing in Litmus) ignores the second media query and keeps the width at 300px.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 320px) {
/* Styles */
table[class="table"], td[class="cell"] {
width: 300px;
}
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
table[class="table"], td[class="cell"] {
width: 100%;
}
}
try -webkit-min-device-pixel-ratio and min-device-pixel-ratio
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
see http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I try to make this media query work on both desktop when I resize the page and on Mobile phone.
this work on mobile
#media screen and (max-device-width: 320px) {
...
}
and this on desktop
#media screen and (max-width: 320px) {
...
}
but I can't make them work both I try to use or operator but didn't work.
According to the W3 documentation for Media Queries:
Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND.
Use a comma instead of or:
#media screen and (max-device-width: 320px), (max-width: 320px) {
...
}
-webkit-device-pixel-ratio query is supported by both iOS and Android but since iOS does not support target-densitydpi=device-dpi it leads to different results. For example:
#media screen and (-webkit-device-pixel-ratio: 2) {
body { font-size: 2em; }
}
will make font look good on Galaxy Nexus, but on iPhone 4 it will be too big.
Is there a way to emulate target-densitydpi=device-dpi on iOS without JavaScript or to disable -webkit-device-pixel-ratio on iOS and leave its users with blurry images as a fallback?
#media (-webkit-min-device-pixel-ratio: 2), /* Retina on Webkit */
(min-resolution: 192dpi) /* Everyone else */ {
...
}
from this great article I incidentally read today:
http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/