@media only screen
and (min-device-width :1536px)
and (max-device-width : 2048px)
and (orientation : landscape) {
Is the above the correct way to target the new iPad? It doesn’t seem to work for me. The values under it are different for portrait and landscape, yet they both show the same screen layout when rotated either way (2 cols for for portrait - which is correct, and 2 cols instead of 3 for landscape - which is incorrect).
This page is using responsive web design. Works perfectly on desktop and iPhone (3 columns collapse into 2 on the desktop, then onto 1 on the iPhone:
http://www.teamassociated.com/downloads/webapp/fluid.html
/* new 2012 iPads (portrait) ----------- */
@media only screen
and (min-device-width :1280px)
and (max-device-width : 1536px)
and (orientation : landscape) {
#wrapper {
width: 100%; margin: 0 auto; padding: 0;
}
#header
{
margin:0;
background-color: #000;
margin-bottom: .5em;
}
body {
line-height: 1.4em;
}
.gutter
{
visibility:hidden; height:1px;
}
#col1
{
visibility:hidden; height:1px;
}
#col2
{
clear:both;
float: left;
width: 10%;
background-color: #d3d3d3;
margin: 10px;
border-right: 15px white solid;
}
#col3
{
clear:both;
float: left;
width: 100%;
background-color: #d3d3d3;
margin: 10px;
}
#footer
{
clear: both;
height: 50px;
background-color: #666;
}
h1
{
margin: 0;
padding: 5px;
}
h2
{
margin-top: 0;
padding-top: 7px;
}
h2, p
{
margin-left: 7px;
margin-right: 7px;
}
img {
width:100%;
}
.imgright50 {
float:right;
width:50%;
margin-bottom:.5em;
margin-right:.5em;
}
div.center {
text-align:center;
}
}
/* new 2012 iPads (landscape) ----------- */
@media only screen
and (min-device-width :1536px)
and (max-device-width : 2049px)
and (orientation : landscape) {
#wrapper {
width: 100%; margin: 0 auto; padding: 0;
}
#header
{
margin:0;
background-color: #000;
margin-bottom: .5em;
}
body {
line-height: 1.4em;
}
.gutter
{
float: left;
width: 10px;
height: 10px;
}
#col1
{
float: left;
width: 15%;
background-color: #d3d3d3;
margin: 10px;
border-right: 15px white solid;
}
#col2
{
float: left;
width: 48%;
background-color: #d3d3d3;
margin: 10px;
border-right: 15px white solid;
}
#col3
{
float: left;
width: 20%;
background-color: #d3d3d3;
margin: 10px;
}
#footer
{
clear: both;
height: 50px;
background-color: #666;
}
h1
{
margin: 0;
padding: 5px;
}
h2
{
margin-top: 0;
padding-top: 7px;
}
h2, p
{
margin-left: 7px;
margin-right: 7px;
}
img {
width:100%;
}
.imgright50 {
float:right;
width:50%;
margin-bottom:.5em;
margin-right:.5em;
}
div.center {
text-align:center;
}
}