What media sizes should I target RSS

• • Reply
  

  Jackxxx

  Contributor

  3060 Points

  2807 Posts

  What media sizes should I target

  Nov 29, 2012 09:24 PM|LINK

  If I want to support the iPhone, iPad, and Surface what Media sizes should I use?

  @media screen and (min-width: 481px) and (max-width:979px)

  Also should I use the viewport width device width or is there a better setting?

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  Thank you
  
  Jackxxx
• • Reply
  

  Gaspard

  Contributor

  2066 Points

  416 Posts

  Re: What media sizes should I target

  Nov 29, 2012 09:39 PM|LINK

  Maybe this web page can help

  http://www.html5rocks.com/en/mobile/mobifying/

  Regards

• • Reply
  

  raju dasa

  Star

  14716 Points

  2494 Posts

  Re: What media sizes should I target

  Nov 30, 2012 04:42 AM|LINK

  Hi,
  
  Check these sites:
  http://stackoverflow.com/questions/3582700/mobile-website-screen-size
  http://www.uxbooth.com/articles/considerations-for-mobile-design-part-2-dimensions/
  http://www.sitepoint.com/forums/showthread.php?835251-The-best-screen-width-to-design-to
  
  

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera
• • Reply
  

  Jackxxx

  Contributor

  3060 Points

  2807 Posts

  Re: What media sizes should I target

  Nov 30, 2012 04:17 PM|LINK

  What is wrong here?

  On the iPhone when the page opens in Portrait it's perfect, but I switch the phone to Landscape I need to double click to make it correct.

  I have this as my viewport:

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  I have the following in my css file:

  @media screen and (min-width: 320px) and (max-width: 480px)
  
  {
      #wrapper
      {
          width: 98%;
      }
  
      div.section
      {
          width: 98%;
          margin: 0px 0px 10px 0px;
          background-color: #000; /*Black*/
          color: white;
          float: none;
          font-weight: normal;
          font-family: Arial, Calibri;
          font-size: 0.65em; 
      }
      .clearfix:before, .clearfix:after
      {
          content: "";
          display: table;
      }
      .clearfix:after
      {
          clear: both;
      }
  
      img.e
      {
          display: block;
          margin-left: auto;
          margin-right: auto;
          max-width: 25%;
          max-height: 25%;
      }
      h1
      {
          text-align: center;
          font-family: Calibri, Arial;
          font-size: 0.85em; 
          color: #747474;
      }
      h1 a
      {
          font: bold 0.58em Calibri, Arial; 
          color: #747474;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          text-decoration: none;
      }
  
  }

  Thank you
  
  Jackxxx