私のウェブページは、ラップトップで表示すると画面全体に表示されますが、iPhone または iPad で表示し、デバイスを垂直に立てると、ページが下に約 3 クォーターしか表示されず、下の空白がすべて残ります。この厄介な問題を解決するにはどうすればよいですか?
html {
padding:0;
margin:0;
}
body {
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
padding:0;
margin:0;
min-width:1100px;
color:#807979;
}
#container {
width:1000px;
margin:auto;
height:auto;
padding:0.5em 0;
}
#header {
width:100%;
}
#header1{
height:78px;
width:49.5%;
float:left;
}
#header2{
padding:15px 0 0 0;
width:49.5%;
float:right;
}
#content1 {
width:100%;
height:400px;
margin:0 0 1% 0;
clear:both;
}
#content2 {
width:45.5%;
height:250px;
float:left;
margin:0 0 1% 0;
padding:2%
}
#content3 {
width:45.5%;
height:250px;
float:right;
margin:0 0 1% 0;
padding:2%;
}
#footer {
width:100%;
height:150px;
clear:both;
background:url(images/footerback1.png);
color:#fff;
}
</head>
<body>
<div id="container">
<div id="header">
<div id="header1">
<img src="images/sdlogo.png"/>
</div> <!--header1-->
<div id="header2">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="what we do.html">What We Do</a></li>
<li><a href="contact us.html">Contact Us</a></li>
</ul>
</div> <!--header2-->
</div> <!--header-->
<div id="content1">
<img src="images/main123.png"/>
</div> <!--content1-->
<div id="content2">
<img src="images/ybyw.png"/>
<p>SD Creative are a leading Web Design company in the north of England. We will ensure your website will stand out from the crowd. Its not all about
looking good(that with us comes standard!) You need your website to work for you and help your business grow. Get in contact with us and let us help you. </p>
</div> <!--content2-->
<div id="content3">
<img src="images/attractive.png"/>
<p>Here at SD Creative Web Design we provide you with everything you need for your website. We create attractive websites that will work wonders for your company.</p>
</div> <!--content3-->
</div> <!--container-->
<div id="footer">
<div id="footerwrap">
<div id="footer1" class="center">
<ul id="bottom">
<li><a href="home.html">Home</a></li>
<li><a href="what we do.html">What We Do</a></li>
<li><a href="contact us.html">Contact Us</a></li>
</ul>
</div> <!--footer1-->
<div id="footer2">
<p class="center">
<a href="#"><img src="images/logo_facebook.png"/></a>
<a href="#"><img src="images/twitter.png"/></a>
</p>
</div> <!--footer2-->
<div id="footer3">
<p>
<img src="images/logosd.png"/>
</p>
</div> <!--footer3-->
</div> <!--footerwrap-->
<div id="footerbottom">
<p class="center">Scott Doherty Creative, Middleham, Leyburn, North Yorkshire
</div> <!--footerbottom-->
</div> <!--footer-->
</body>
</html>