-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/
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 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");
}
}
For some reason, the below is not working for Samsung Galaxy S3 devices in the default Android browser...
#media only screen and (min-width: 480px) and (max-width: 960px) {
/* Force 3 columns into 2 columns between 480px and 960px widths */
.products-grid--max-3-col > li {
width: 50%;
margin-right: 0;
}
.products-grid--max-3-col > li:nth-child(even) {
margin-right: 0;
}
.products-grid--max-3-col > li:nth-child(3n+1) {
clear: none;
}
}
The reason for this to prevent the layout (product grid) flowing to 3 columns until the width is 961px upwards.
If you view the page in the Chrome browser on the same device, it shows 2 columns as expected but in the default Android browser, a rather messy 3 columns.
I'm absolutely stumped as to why this media query would not workj in the default Android browser. Should the above be sufficient in targeting the Galaxy S3's landscape view?
Doh. Panic over, like a complete idiot, we had inserted a media query inside of another very long media query (didn't even realise).
This was not a problem for Chrome to throw a wobbly but clearly Android did not like this...
Anyway, moving the media query outside of the long media query resolved this for us. Thought about deleting the question but you never know, this might happen to someone else that happens to stumble across this...
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.
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 ... */
}