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{
}
}
