#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    Post Media Queries for Mobile Browser Detection


    I have been following a multitude of resources Online regarding the use of media queries to improve the experience for mobile users of a variety of screen resolutions.

    At this point I have been working with an HTC EVO 4G which has a screen res of 800 x 400.

    A Core.css file was created, this is loaded in the head of the HTML doc, within this stylesheet I have defined a few base values and then I have setup media queries within core.css for 128px x 160px, 800px x 480px, and 1280px x 720px mobile devices.

    All works great when I only have the first three media queries; 128px, 480px & 800px, everything goes awry once I add the 1280px media querie, and no matter what I do the HTC continues largely to utilize the Samsung Galaxy S3 media querie CSS contents which continues even if I increment the res factor through the roof.

    I have created a test-bed page: http://m.mypcnw.com/Work.shtml

    Any input would be greatly appreciated...

    Here are the contents of the CSS file:
    Code:
      /** Media query definition 'max-width' required for use with ProtoFluid **/
      /** http://protofluid.com/ **/
    
      html, body{padding:0px;margin:0px;width:auto;height:auto}
      body{width:inherit;height:inherit;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:101%;background:#002E79}
    
      #container{height:auto;position:relative} /** Header, Body, Footer Container **/
      #header{background:transparent;padding:10px}
      #body{
       padding:10px;
       padding-bottom:60px; /* Height of the footer */
       z-index:-1
      }
      #footer{
       position:absolute;
       bottom:-1000px;
       width:100%;
       height:60px; /* Height of the footer */
       background:transparent;
       border-style:solid;
       border-width:thin 0px 0px 0px;
       border-color:#0033FF
      } /** Header, Body, Footer Container **/
    
      .nadaON, .one28ON, .eight00ON, .nada, .one28, .eight00, .twelve80ON, .twelve80{color:white}
      .nadaON{position:relative;top:0px;left:0px;display:inline}
      .one28ON{display:none}
      .eight00ON{display:none}
      .twelve80ON{display:none}
      .nada{position:relative;top:0px;left:0px;display:inline}
      .one28{display:none}
      .eight00{display:none}
      .twelve80{display:none}
      /**.Wide100{display:none}**/
      /**.Wide250{display:none}**/
    
      /** RESOLUTION 128px "OR" 160px **/
    
    @media screen and (max-device-width: 128px) {
    
      .nadaON{display:none}
      .one28ON{position:relative;top:0px;left:0px;display:inline}
      .eight00ON{display:none}
      .twelve80ON{display:none}
      .nada{display:none}
      .one28{position:relaive;top:0px;left:0px;width:auto;height:auto;display:block}
      .eight00{display:none}
      .twelve80{display:none}
    
      .Wide250{width:128px;height:14px;background:#B22222;position:absolute;top:40px;left:0px}
      .Wide100{width:128px;height:14px;background:#9932CC;position:absolute;top:55px;left:0px}
    } /** CLOSE Average market 128 x 160 "small screen"**/
    
    
      /** HTC EVO 4G 800px x 480px **/
    
    @media only screen and (max-device-width: 480px){
    
    
      body{background:#FF9900}
      .PC{position:relative;top:0px;left:0px;background:url("/Assets/Img/3D/PCNetworks.png");background-repeat:no-repeat;width:480px;height:124px}
      .nadaON{display:none}
      .one28ON{display:none}
      .eight00ON{position:relative;top:0px;left:0px;display:inline}
      .twelve80ON{display:none}
      .nada{display:none}
      .one28{display:none}
      .eight00{position:relaive;top:0px;left:0px;width:auto;height:auto;display:inline}
      .twelve80{display:none}
    
      .Wide250{width:50px;height:50px;background:red;position:absolute;top:330px;left:125px;display:block}
      .Wide100{width:50px;height:50px;background:white;position:absolute;top:342px;left:165px;display:block}
    
    } /** CLOSE HTC EVO 4G 800px x 480px **/
    
    
        /** HTC EVO 4G 800px x 480px **/
    
    @media only screen and (max-device-width: 800px) {
    
      body{background:#FF9900}
      .PC{position:relative;top:0px;left:0px;background:url("/Assets/Img/3D/PCNetworks.png");background-repeat:no-repeat;width:480px;height:124px}
      .nadaON{display:none}
      .one28ON{display:none}
      .eight00ON{position:relative;top:0px;left:0px;display:inline}
      .twelve80ON{display:none}
      .nada{display:none}
      .one28{display:none}
      .eight00{position:relaive;top:0px;left:0px;width:auto;height:auto;display:inline}
      .twelve80{display:none}
    
      .Wide250{width:50px;height:50px;background:red;position:absolute;top:330px;left:125px;display:block}
      .Wide100{width:50px;height:50px;background:white;position:absolute;top:342px;left:165px;display:block}
    
    } /** CLOSE HTC EVO 4G 800px x 480px **/
    
    
      /** Samsung Galaxy S3 1280px x 720px **/
    
    @media only screen and (max-device-width: 1280px) {
    
      body{background:#336600}
      .twelve80, .twelve80ON{color:white}
      .PC{position:relative;top:0px;left:0px;background:url("/Assets/Img/3D/PCNetworks.png");background-repeat:no-repeat;width:480px;height:124px}
      .nadaON{display:none}
      .one28ON{display:none}
      .eight00ON{display:none}
      .twelve80ON{position:relative;top:0px;left:0px;display:inline}
      .nada{display:none}
      .one28{display:none}
      .eight00{display:none}
      .twelve80{position:relative;top:0px;left:0px;display:inline}
    
      .Wide250{width:50px;height:50px;background:blue;position:absolute;top:200px;left:99px}
      .Wide100{width:50px;height:50px;background:gold;position:absolute;top:251px;left:125px}
    } /** CLOSE Samsung Galaxy S3 1280px x 720px **/
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    When you say "max-width", you're not just targeting the device with a resolution of 1280px, you're targeting every device with a resolution below that as well. You're saying "everything up to 1280px". If you want to only target 1280px and above, try min-width.

IMN logo majestic logo threadwatch logo seochat tools logo