Developing websites today means much more thought is required than it used to before the iPad and tablets came about.

A web developer today has to build a website for much larger desktop screen and at the same time make the website work on iPads and tablets.

To help hobby web developers here is some Chameleon help:-

iPad & Iphone CSS Media Queries Landscape and Portrait


/* iPad in portrait & landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Add style here */
}

/* iPad in landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Add style here */
}

/* iPad in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Add style here */
}

/* iPad mini in portrait & landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* Add style here */
}


/* iPhone 6 in landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
/* Add style here */
}

/* iPhone 6 in portrait */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
/* Add style here */
}

/* iPhone 5 & 5S in landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* Add style here */
}

*/ iPhone 5 & 5S in portrait */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* Add style here */
}