0

I'm playing with media queries and I have a blank body tag although when I use google chrome and the emulation option to replicate a Samsung S2 I can see I get scroll bars even though there's no content. Any ideas why I get scroll bars? Thanks,

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link rel="stylesheet" href="css/mobile.css" type="text/css" media="all" />
  </head>
<body>
</body>
</html>

CSS FROM MOBILE.CSS

@media only screen and (max-device-width: 480px) {
    body {
    }
}

SCREEN SHOT OF SCROLL BARS

enter image description here

James Radford
  • 1,815
  • 4
  • 25
  • 40

1 Answers1

0

The phone provides a 'larger' viewport, than its screen really is. Add the viewport-metadata to head and it should work:

<head> ....
   <meta name="viewport" content="width=device-width">
   ... 
</head>

An example for a visual understanding:

smartphone viewport without width=device-width

Or as playalong code:

<html>
<head>
    <title>Viewport on Smartphone and Desktop</title>
    <!-- without width = device width smartphones show full page but small as in overview zoom -->
    <!-- disable this automatic scaling -->
    <meta name="viewport" content="width=device-width">
</head>
<body>
<style>
    html, body {
        margin: 0;
        padding: 0;
        background-color: #EDECEC;
    }

    p {
        padding: 30px 0;
        margin: 30px 0;
        text-align: center;
        font-family: sans-serif;
        font-size: 300%;
    }
    .ausgabe{
        font-size: 150%;
    }

    .pixel {
        width: 320px;
        background-color: #6B5B69;
        color: #fff;
    }

    .prozent {
        width: 100%;
        background-color: #D06836;
        color: #F8F8F8;
    }
</style>
<p class="pixel">320px</p>

<p class="prozent">100%</p>

<p class="ausgabe"></p>
<script>

    var metaList = document.getElementsByTagName( 'meta' ),
            metaFlag = false,
            devWidth = window.screen.width,
            browserWidth = document.documentElement.clientWidth;

    if ( metaList.length > 0 && metaList[0].name == 'viewport' && metaList[0].content == 'width=device-width' ) {
        metaFlag = true;
    }
    document.getElementsByClassName( 'ausgabe' )[0].innerHTML = 'width=device-width: ' + metaFlag + '<br/>' +
            'Device Width: ' + devWidth + '<br/>' + 'Browser Width: ' + browserWidth;
</script>
</body>
</html>
dsuess
  • 5,219
  • 2
  • 22
  • 22
  • Lools great but how do you reference a css file that has the right settings for either a mobile or desktop device? I'm not clear on how the reference to the external css file looks Thanks – James Radford Jun 08 '14 at 09:50
  • 1. use the meta tag with viewport, 2. it should work with `` . You may find this article usefull: http://css-tricks.com/resolution-specific-stylesheets/ . Unfortunally it will LOAD BOTH files, but just apply the correct one. If you resize the browser window, you will see the specific design rules. – dsuess Jun 08 '14 at 21:43