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/
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");
}
}
i tried the following css Media queries in my css file for adjusting size and position of 2 images in div.but its not working properly ,eventhough i have given the correct parameters in media query.I am creating mobile webpage (HTML5,CSS,JS) targetting on Iphone blackberry,android & windows devices.
my css media query for s3 is as follows..
#media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait)
{
#image1{height:45%;width:42%;margin-left:2%;margin-top:2%;float:left;}
#image2{height:55%;width:55%;margin-right:0px;margin- top:0;float:right;position:relative;z-index:3;}
}
my css media query for iphone 3 gen is as follows
#media only screen and (device-width:320px) and (device-height:480px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait)
{
#image1{height:77%;width:42%;margin-left:2%;margin-top:2%;float:left;}
#image2{height:100%;width:55%;margin-right:0px;margin- top:0;float:right;position:relative;z-index:3;}
}
The problem i am facing here is in iphone 3 the css for galaxy s3 is getting loaded. i tried with this code also for s3 ,
#media only screen and (min-device-width:720px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait)
{
#image1{height:45%;width:42%;margin-left:2%;margin-top:2%;float:left;}
#image2{height:55%;width:55%;margin-right:0px;margin- top:0;float:right;position:relative;z-index:3;}
}
sadly the result was same in iphone .what should i do here.is there any good references for targetting multiple mobile platform with 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 ... */
}
-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/