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.
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/