Chaps,
I wonder if anybody can help me with this issue. Basically, I have a simple page that I am trying to make responsive and it all works ok except that on a mobile phone in landscape mode I am experiencing problems. Now, let me say first that I have worked on a few mobile projects before but I don't have a great deal of experience with it, so it might be that I am missing something really elementary here.
So let's look at the code. First, here's a link to the page, so you can replicate the issue:

http://antobbo.webspace.virginmedia.com/various_tests/responsive/template.html

If you look at this site on a mobile phone (I am using a samsung galaxy I android version 4.0.1 custom rom) you will notice that everything looks the way I want, but if you refresh the site while in landscape you will notice that the site is slightly zoomed in, and it shouldn't be because I have the metatag that says user-scalable=no

In terms of media queries I have only used the following:

@media screen and (max-width:984px){
...
}

because the site width is 984px and

@media screen and (max-width:500px){}

for mobile phones.
Like I said mobile in portrait works fine, so the problem has to be with the first query max-width:984px. I have run a series of tests: first to get the exact size of my phone screen size, which is apparently 800px x 480px in landscape. The strange thing is though that if in the media query I change @media screen and (max-width:500px){} to @media screen and (max-width:767px){} my phone in landscape picks that up, making me think that in fact the real size of my phone in landscape isn't in fact 800px! Weird. ANyway, whatever it is I am having problems to make sure that the little "zoomed in factor" is removed from the mobile landscape. Why is it zooming in and how do I get rid of it? I don't understand whether that is a media query problem or a html one. ANy help much appreciated!
Here is the rest of the code:
HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1"/>
        <title>Generic page template</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link rel="stylesheet" type="text/css" href="css/mediaQueries.css">

    </head>
    <body>
        <div class="outerContainer">
            <header>
                <div class="bannerContainer">            
                </div><!-- end of bannerContainer -->
            </header><!-- end of header -->
            <section class="content">                
                <div class="contentContainer">
                    <div class="introBox">                   
                    </div><!-- end of introBox-->
                    <div class="information">                            
                    </div><!-- end of information-->
                    <div class="rightCol">               
                    </div><!-- end of rightCol -->    
                </div><!-- end of contentContainer -->
                <div class="clear"></div>
                <div class="bottomBox">                  
                </div><!-- end of bottomBox -->               
            </section><!-- end of section -->
            <footer>

            </footer><!-- end of footer-->
        </div><!-- end of outerContainer -->
    </body>
</html>

CSS:

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


body{
    background-color:gray;
}
.clear{
    clear:both;
}
.clearTry{
    clear:left;
}
.outerContainer{
    width:984px;    
    margin:0 auto;
    min-height:500px;
    background-color:#ffffff;

}
.bannerContainer{
    background-color:gray;
    min-height:50px;
}
/*main content section*/
section.content{    
    min-height:500px;
    padding:10px 10px 30px 10px;
}
section.content .contentContainer{
    position:relative;
}
 .introBox{
    width:634px;
    min-height:240px;
    background-color:blue;
    margin-bottom:10px; 
    float:left;
    *float:none;
}

 .information{
    width:634px;
    height:220px;
    background-color:#e2e2e2;   
    float:left;
    *float:none;
}

section.content .rightCol{
    width:320px;
    /* background-color:red; */ 
    /* float:right; */
    margin-left:10px;   
    position:absolute;
    top:0px;
    right:0px;  
    height:470px;
    background-color:red;
}

.rightCol .regionCottageWrapper, .rightCol .collectionSearchWrapper{
    margin-bottom:10px;
}
.rightCol .region, .rightCol .cottage{
    width:155px;
    height:190px;
    float:left;

}


.rightCol .regionCottageWrapper{
    height:190px;
}
.rightCol .region{
    background-color:green; 
    position:absolute;
    top:0;
    right:165px;
}
.rightCol .cottage{
    background-color:yellow;
    margin-left:10px;
    position:absolute;
    top:0;
    right:0;
}

.collectionSearchWrapper .collectionSearch, .collectionSearchWrapper .cottageSelection, .collectionSearchWrapper .collectionBreakout{
    width:155px;
    float:left;
}
.collectionSearchWrapper .collectionSearch{ 
    height:139px;
    background-color:orange;
    margin-right:10px;
}
.collectionSearchWrapper .cottageSelection{
    height:40px;
    background-color:magenta;
}
.collectionSearchWrapper .collectionBreakout{
    margin-top:10px;
    height:90px;
    background-color:yellow;
}

.rightCol .serviceQuality{
    width:320px;
    background-color:#e2e2e2;
    min-height:120px;
}

section.content .bottomBox{
    width:964px;
    height:165px;
    background-color:#e2e2e2;
    margin-top:10px;
}

/*end of main content section*/
footer{
    min-height:214px;
    background-color:#e2e2e2;
}

media query

@media screen and (max-width:1024px){

}

@media screen and (max-width:984px){

    .outerContainer{
        width:768px;
    }
    .introBox{
        width:708px;
        float:left;
    }
    .contentContainer .information{
        width:378px;
        float:left;
        min-height:465px;
    }
    section.content{
        padding:10px 30px 10px 30px;
    }
    section.content .bottomBox{
        width:708px;
    }
    section.content .rightCol{
        position:static;
        float:left;
    }
}
@media screen and (max-width:500px){
    .outerContainer{
        width:320px;
    }
    .introBox{
        width:320px;
        float:none;
    }
    .contentContainer .information{
        width:320px;
        float:none;
    }
    section.content .rightCol{
        margin-left:0;
        margin-top:10px;
    }
    section.content .bottomBox{
        width:320px
    }   
    section.content{
        padding:10px 0;
    }

    section.content .rightCol{
        float:none;
    }
    .contentContainer .information{

    }

}
Member Avatar for iamthwee

Why not just use bootstrap or skeleton?

Serious question.

Would the "only" keyword help here? For example,

@media only screen and (max-width:500px)

iamthwee, unfortunately it is not me taking decisions, so I can't use bootstrap.
webmeat, I will cerainly try that, but as I said I have a feeling that the problem is with the other query and not the one you mentioned

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.