www.webdeveloper.com
Results 1 to 4 of 4

Thread: Newbie mobile CSS query

  1. #1
    Join Date
    May 2011
    Posts
    23

    Newbie mobile CSS query

    Hi all

    I'm just dipping my toe into the world of mobile web site development for the very first time and have made a little headway and created a really simple bit of code as follows:

    HTML Code:
    <!DOCTYPE html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style>
      body	{
        background-color: #CCCCCC;  
    	font-size: 12px;
      }
    
    @media (max-width: 360px) {
      body	{
        background-color: #999999;  
    	font-size: 16px;
      }
    
      .mycontent {
        width: 75%;
        background-color:#00ff90;
        color:navy;
        border:2px solid darkblue;
        padding:2px;
      }
    }
    </style>
    </head>
    <body>
        <div class="mycontent">
            Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
            Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
            Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
            Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
        </div>
    </body>
    </html>
    This simply displays the above text without any formatting and fills the screen width *except* if the window becomes less than 360 pixels wide, at which point the Media Query kicks in and it changes the style of the 'mycontent' box and changes the background color too. It's basic stuff (though shiny and new to me).

    My query is, when I look at this page on my Android HTC One S device, a device that is 540 pixels wide - the alternate style sheet is clicking in and displaying the page as if it's 360 pixels wide. If I change this:

    @media (max-width: 360px)

    ..to be 359 pixels or less, the alternate style sheet instantly stops working and the text is plain and fills the screen again. I just can't understand why it's doing this though and if I can't figure this out I just know I'll be getting lost further down the line once I start coding more complex stuff! I would have thought that I'd have needed the figure "540" in the above Media Query code before it started displaying the alternate style sheet on my phone.

    Can anyone help?

    cheers

  2. #2
    Join Date
    May 2014
    Posts
    606
    You need a bit more in that viewport meta. There is also an automatic device scaling you need to kill (with fire) and rotated some android devices are now reporting HEIGHT as width...

    The one I'm using right now is:
    Code:
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    Telling it not to apply any auto-zoom/scaling on load, and not to lie about width and height.

    I also suggest adding this to your stylesheet:
    Code:
    @media (max-width:600px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    As IE on Win8 mobile and Safari on iOS also add a further adjustment that screws up using dynamic fonts. I send that in a media query as if it gets sent to desktop/OSX Safari it breaks the ability to zoom; laughably stupid since it does NOT break zooming on iOS, but that's crApple for you.

    Really though when using media queries I rarely declare them in pixels, but that's because my layouts are elastic so px breakpoints will likely not work well with dynamic (%/em) fonts.. I also don't base queries on specific devices or screen sizes, but base them on where the CONTENT needs to be re-arranged.

    Again, as I say a lot, content dictates markup, markup and content should dictate layout; hence why drawing goofy pictures and calling it design before there's semantic markup is a back-assward approach to web development, no matter how many ignorant PSD jockeys and sleazy scam artists seem to think that's the be-all end-all of design and development.

    Hope this helps.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    May 2011
    Posts
    23
    Hi there, thanks for the reply. I tried that but am still having exactly the same problem. If I set @media (max-width) to be 359 or under, it loses the styles but anything 360 and above shows the style fine, when it should actually be clicking in when set to 540 pixels (the width of the phone screen). I'm truly stumped as to why it's doing this...

  4. #4
    Join Date
    May 2011
    Posts
    23
    Still stumped, can anyone else help at all?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles