I'm pretty new in this area of developing, and I'm trying to figure out the making of iOS app using Phonegap. I've created four different CSS files for different resolutions.
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 2048px)" href="css/ipad-retina.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 960px)" href="css/iphone-retina.css" type="text/css" />
I found out that the Simulator always loads the same CSS file, even if I change devices. Is there any way to make it load css files properly?
Thanks people and by the way is my CSS calling correct?
Here is a way to achieve what you are after. Include the specific CSS required in each section.
/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}