我的网站在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 & 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 & 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> [email protected]</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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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>[email protected]</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;
}
最佳答案
链接已断开，因此无法真正看到您的网站。
就在我的头顶上，尝试添加这样的元标记：
<meta name = "viewport" content = "width=device-width; initial-scale = 1; maximum-scale=1; user-scalable = no;" />
关于html - ipad纵向 View 上的网站，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13016109/