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");
}
}
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.
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/
-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/