SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Media Queries and new iPad

    @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/downlo...app/fluid.html

    HTML Code:
    /* 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;
    }
    }

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I solved the problem by NOT using media queries for those dimensions at all.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you fixed it and sorry we were too late to help.

    Sometimes doing nothing is the best approach

    Media queries are good but is getting rather too complex to cater for millions of devices and orientations and display density especially as the goal posts are changing daily. A simpler more fluid design is often a better option.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •