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
}
}
}
Related
I have set of custom system icons(png files) and they're in drawable-xhdpi,drawable-xxhdpi and drawable-xxxhdpi folders for android.
Now my question is when I use them how should I call them?
For example, I want the system to pick the correct edit_pencil.png
This is what I have at the moment and I know this explicitly define the edit_pencil.png which I don't want. Could anybody help?
<img class="addPictureIcon" src="assets/img/drawable-xhdpi/edit_pencil.png"
(click)="selectPicture()"/>
When you are using ionic framework, you have to place your images inside src/ folder, probably src/assets/images.
Those platform folders are created automatically, so if you place anything there you are making a mistake.
To call an image it would be
<img src="src/assets/images/edit_pencil.png">
In your case, you are working with responsive images, so you should make some #media queries to call the right one, for example:
<img class="edit-pencil">
Css
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
img.edit-pencil {
content:url("xsmall-edit_pencil.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
img.edit-pencil {
content:url("small-edit_pencil.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
img.edit-pencil {
content:url("medium-edit_pencil.png");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
img.edit-pencil {
content:url("large-edit_pencil.png");
}
}
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 ... */
}
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/