html - ipad 纵向 View 中的网站

Question

我的网站在 iPad 上显示不正确 - 纵向模式。它在横向模式下看起来很好，但是当我将它变成纵向模式时，我最终得到一个凌乱的网站。所有元素散布在整个站点。我怎样才能解决这个问题？请帮我。

这是我网站的链接:inclouds.co.uk

这是我的 html 代码:

<div id="header">


         <div class="block1"> 

                <a>InClouds Hosted Business Services<br /><br /> </a><br />

                <strong><ul> 
                <li>Hosted Desktops &amp; Servers </li>
                <li>Hosted IP Telephony</li>
                <li>Hosted Electronic Document Management</li>
                <li>Private Cloud: MPLS Core Network</li>
                </ul></strong>
    </div>



    <div class="block2">
                <img width="200" height="60" src="img/logo.png"  alt="" />
                <br /><br />
               <subheading>Hosted IT &amp; Telecoms<br /><h3>Communications for Business</h3></subheading>

    </div>

    <div class="block3">
             <cont>
               <h1>  <img src="img/tel.jpg" width="25px" height="20px" /> 0845 355 1200</h1><br /> 
      <img src="img/email-icon.jpg" width="24" height="22" /><h2>  info@inclouds.co.uk</h2></cont>

    </div>




  </div>

  <div id="navbar">

  <form name="form1" method="post" action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
    <label for="search"></label>
    <input type="text" name="search" id="search1" style="width: 150px; height: 15px;" >
  </form>

  <div class="menu">
             <ul id="nav">
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">SUPPORT</a></li>

            </ul>
    </div>
  <login><a href="index.html"><img src="img/images/loginclient_05.png" alt="login" longdesc="http://www.inclouds.co.uk/login" href="login.html"></a> </login> 
  </div>

  <div id="feature">



    <div id="page">

    </div>




  </div>
  </div>
  <div id="container">
  <div id="main">
  <div id="sidebar">

            <div id="sidebarA">

                <heading>HOSTED SERVICES</heading>




            </div>
            <div id="sidebarB">

                <img src="img/callus.png" />

            </div>
            </div>

            <div id="services">

                <a href="#"><img id="sBox1" src="img/1.png" alt="" /></a>
                <a href="#"> <img id="sBox2" src="img/2.png" alt="" /></a>
                <a href="#"> <img id="sBox3" src="img/3.png" alt=""  /></a>
                <a href="#"> <img id="sBox4" src="img/4.png"  alt="" /></a>               
                <a href="#"> <img id="sBox5" src="img/5.png"  alt="" />
                <a href="#"> <img id="sBox6" src="img/6.png" alt=""  /></a>
                <a href="#"> <img id="sBox7" src="img/7.png" alt=""  /></a>
                <a href="#"><img id="sBox8" src="img/8.png"  alt="" /></a>
                <a href="#"><img id="sBox9" src="img/9.png"  alt="" /></a>          

            </div>
            <div id="sidebar2">
            <heading>About Us</heading>
                <featured1>


<script type="text/javascript">

var marqueewidth="155px"
var marqueeheight="430px"
var marqueespeed=1
var initPause=1000
var full=1
var pauseit=1
var iebreak='<p></p>'

var marqueecontent='<font face="Arial">InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p>InClouds provide our IT Telecoms, Networks &amp; infrastructure all via their private cloud. This has Massively changed and improved the way we now work for the better.</p><p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadispscing alitr. </p></font>'


var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
var actualheight=''
var cross_marquee, cross_marquee2, ns_marquee

function populate(){
if (iedom){
var lb=document.getElementById&&!document.all? '' : iebreak
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee.style.top=(full==1)? '2px' : parseInt(marqueeheight)+8+"px"
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent+lb
actualheight=cross_marquee.offsetHeight
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)<(actualheight*(-1)+8))
cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight+8)+"px"
if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)+8))
cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+8)+"px"
cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
}

else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed" scrollamount="1">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;z-index:100;">')
write('</div></div>')

}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}
</script>
</featured1>
            </div>
  </div>

<div id="footer-wrapper">
        <div id="footer">

            <div id="partner">
                <img src="img/partnerslogo.png" alt=""  />
            </div>

            <div id="footer-links">

               <div class="f1">

                <strong><ftr_header>Sitemap</ftr_header></strong><br />
                <a href="/">Homepage</a><br/>
                <a href="/">Why Netplan?</a><br/>
                <a href="/">Philosophy</a><br/>
                <a href="/">Green Policy</a><br/>
                <a href="/">Service Level Agreement</a><br/>
                <a href="/">PCI DSS Hosting</a><br/>
                <a href="/">Contact Details</a><br/>
                <a href="/">Blog</a><br/><br /><br /><br /><br /> <br />
                <a href="/"><img src="img/cookie-policy.png" width="200px" height="73px"/></a>                

                <site>Site by:</site>
                <ba><img id="img" src="img/propromo.png" width="100px" height="20px"></ba>
                </div>

                <div class="f2">

                <strong><ftr_header>Sitemap</ftr_header></strong><br />
                <a href="/">Homepage</a><br/>
                <a href="/">Why Netplan?</a><br/>
                <a href="/">Philosophy</a><br/>
                <a href="/">Green Policy</a><br/>
                <a href="/">Service Level Agreement</a><br/>
                <a href="/">PCI DSS Hosting</a><br/>
                <a href="/">Contact Details</a><br/>
                <a href="/">Blog</a><br/><br />

                </div>

                <div class="f3">

                <heading>InClouds Hosted Business Services</heading><br/><br  /><add>
                29th Floor, 1 Canada Square, Canary Wharf<br/>
               London, UK E14 5DY<br/><br/></add>
                </div>
                <div class="f4">
                <quote>Quote Line</quote><br/>

                <num>0845 355 1200</num><br />
                <email>info@inclouds.co.uk</email><br /><br/><br /> <br/><br />

                <ul id="socialmedia">
                <li><a href="#"><img src="img/Twitter-Logo-300x293.png" width="40px" height="40px"/></a></li>
                <li><a href="#"><img src="img/Facebook-skins-post.png" width="40px" height="40px"/></a></li>
                <li><a href="#"><img src="img/LinkedIn_logo.png" width="40px" height="40px"/></a></li>
                <li><a href="#"><img src="img/rss-icon.png" width="40px" height="40px"/></a></li>
                </ul>
                </div>
            </div>

            <div id="wrapperform">
                         <formHeader>Enter your details below and we will keep you<br />
        updatedon relevant industry information and<br />
        technological advances. </formHeader>
                       <style type="text/css">


        </div>
        </div><!-- footer -->
        </div>

CSS 代码:

@charset "utf-8";
/* CSS Document */


#header_container {

    width: 100%;
    background: url(../img/headerbackground.jpg) repeat-x;

    height: 695px;

 }
#header {
width: 990px;
height: 220px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
display: block;
}

.block1 {

    float:left;
    position: relative;
    width: 330px;
    top: 25px;  
}

#header .block1 ul {

    float: left;
    list-style-type: none;
    padding: 0px;   
    margin-left: 30px;
    line-height: 25px;
    font-size: 13px;
    font-weight: 600;
    color: #003;
    text-align: left;
    list-style-image: url('../img/bullets.png');

}

#header .block li{

    list-style-position: inside;
}
#header .block1 a{

    font-weight: bold;
    float: left;
    display:block;
}

.block2 {
    text-align:center;
    width: 33%;
    float: left;
    position: relative;
    top: 85px;

}

#header .block2 subheading {


    font-size:18px;
    font-weight: 600;
    color: #003;
    text-align: center;
    position: relative;
    bottom: 15px;

}

#header .block2 img{

    text-align: center;
}


.block3 {

    width: 330px;
    float: left;
    position: relative;
    top: 25px;
}



#header .block3 cont{
    text-align: right;
    float: right;
}

#navbar {
width: 990px;
height: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 5px;
}

#navbar form{
float: left;
position: relative;
top: 10px;
padding: 0;
margin:0;

}


#nav li {
float: left;
width: 100px;
line-height:10px;
list-style: none;
margin-right: 5px;
text-align: center;
display: block;
font-weight: bold;
color: #003;
}

#nav li a {
text-decoration: none;
font-size:: 18px;
color: #003;

}

#nav li a:hover {
color: #09F;
font-weight:bold;
text-decoration: none;
border-bottom: solid medium #09F;
}

#search1 {
width: 150px;
height: 20px;
background: white  url(../img/searchicon.jpg) right no-repeat;
padding-right: 10px;
}

input
{
  -moz-border-radius: 15px;
 border-radius: 15px;
    padding:5px;
}

.menu {

float:left;
position: relative;
right: 20px;

}

#navbar .menu a{
padding: 0px;
margin: 0px;
}

#navbar .menu img {

border: none;
height: 40px;


}

#navbar login{
    position: relative;
    top: 5px;
    float: right;




}

#navbar login img {

    border: none;
    width: 140px;
    height: 35px;

}

/* ---------------------------------*/

#feature {
width: 100%;
height:420px;
text-align: left;
margin-top: 22px;
}




#slider {
width:100%;
height:416px;

/*IE bugfix*/
padding:0;
margin:0;
}

#slider img {
    height: 416px;
    text-align: center;
}

#slider li { list-style:none; }

#page {
position: relative;
width:100%;
bottom: 20px;
float:left;

}


#container {

    width: 100%;
    background: url(../img/mainbackground.jpg) no-repeat;
    background-size: 100%;
}

#main {
display: block;
width: 990px;;
height: 490px;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
}

#sidebar {

    float: left;
    width: 180px;
    height: 490px;
}
#sidebarA{

    width: 180px;
    height: 335px;
    border: thin solid #666;
        -moz-border-radius: 15px;
        border-radius: 15px;
    position: relative;
    float: left;

}

#sidebarB {

width: 180px;
    height: 140px;
    border: thin solid #666;
        -moz-border-radius: 15px;
        border-radius: 15px;
float: left;
margin-top: 10px;
}

#sidebarB img{

    position: relative;
    left: 17px;
    bottom: 8px;
}

#sidebar heading {

    position: relative;
    top: 10px;
    left: 28px;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    font-weight: bold;
}
#serviceMenu {
position: relative;
left: 10px;
text-decoration: none;
padding: 0;
width: 150px;

}
#serviceMenu li {
margin-top: 2px;
margin-bottom: 2px;
text-decoration: none;
list-style: none;


}

#serviceMenu li a{
color: #333;
font-size: 13px;
text-decoration: none;
}


#services{

    float: left;
    width: 600px;
    position: relative;
    padding: 10px;
}

#services img {

    width: 160px;
    border: none;
    height: 141px;
    padding-left: 15px;
    padding-right: 20px;
    padding-bottom: 15px;
}

#services img:hover {
opacity: 0.7;
filter:alpha(opacity=70);
}

#sidebar2 {

width: 180px;
    height: 490px;
    border: thin solid #666;
        -moz-border-radius: 15px;
        border-radius: 15px;
    position: relative;
    float: left;
left: 10px;
font-size: 15px;

}

#sidebar2 heading {

    position: relative;
    font-weight: BOLD;
    left: 50px;
    top: 10px;
    color: #333;
    text-transform: uppercase;
    font-weight: 550;
}

#sidebar2 featured1 {

position: relative;
top: 25px;
left: 15px;
font-size: 13px;
color: #333;
margin-left: 10px;

}



#footer-wrapper {
width: 100%;
height: 620px;
background: url(../img/footerbackground.png) repeat-x;
text-align: left;
position: relative;
bottom: 30px;

}
#footer {
display: block;
position: relative;
width: 990px;
height: 100%;
bottom: 15px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

#footer .f1 site{

    font-size:14px;
    color: #333;
}

#footer .f1 img{

    position: relative;
    top: 10px;
}
#partner {
    position: relative;
    top: 80px;
    float: left;
    padding-bottom: 50px;
}

#partner img{
    width: 990px;
}

#wrapperform {
position: relative;
width: 300px;
float:left;
margin-top: 75px;
left: 50px;

}

#wrapperform formHeader {

    position: relative;
    font-size: 13px;
    float:left;
    color: white;
    text-align: left;
    left: 26px;
}

#footer-links{

    width: 600px;
    float: left;
    font-size: 10px;
    color: #FFF;
    position: relative;
    top: 15px;
}

.f1 {
        float: left;
        position: relative;
        top: 64px;
        width: 200px;
        font-style:normal;
        line-height: 15px;
}
.f1 a{

    text-decoration: none;
    color: #FFF;
    font-size: 12px;
}


.f1 a:hover {

    text-decoration: underline;
}

.f1 site{
position: relative;
top: 45px;
}

.f1 ba{
position: relative;
top: 40px;
}



.f2 {
        float: left;
        position: relative;
        width: 100px;

        line-height: 15px;
        top: 64px;
        font-style:normal;

}
.f2 a{

    text-decoration: none;
    color: #FFF;
    font-size: 12px;
}


.f2 a:hover {

    text-decoration: underline;
}

.f3 {
        float: left;
        position: relative;
        left: 65px;
        width: 300px;
        line-height: 15px;
        top: 64px;
        font-style:normal;

}
.f3 a{

    text-decoration: none;
    color: #FFF;
    font-size: 16px;
}


.f3 a:hover {

    text-decoration: underline;
}

.f3 heading {

    font-size: 15px;
    color:#FFFFFF;
    font-weight:bold;
}

.f3 add{
    font-size: 13px;
}

.f4 {
        float: left;
        position: relative;
        left: 65px;
        line-height: 15px;
        top: 59px;
        font-style:normal;
        line-height: 25px;

}

.f4 quote {

    font-size: 18px;
    line-height: 20px;

}

.f4 num {

    font-size: 27px;
    font-weight: bold;
}

.f4 email {
    font-size: 20px;
}

.f4 ul{

    float: left;
    position: relative;
    right: 40px;
}

.f4 img{

    border: none;
}

.f4 li{

line-height:10px;
list-style: none;
display: inline;
padding-right: 20px;
font-weight: bold;
color: #003;

}

.low
{
     font: 13px/1.7 'open sans', sans-serif;
    color: #333;
    font-weight: 300;
}
.low a
{
    color: #333;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #ccc;
}
.low a:hover
{
     border: none;
}

.light_image:hover
{
    opacity: 0.8;
}

Answer 1

链接已损坏，因此无法真正看到您的网站。在我的脑海中，尝试添加这样的元标记:

 <meta name = "viewport" content = "width=device-width; initial-scale = 1; maximum-scale=1; user-scalable = no;" />