ipad纵向视图的网站 [英] website on ipad portrait view

查看：108
本文介绍了ipad纵向视图的网站的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

以下是我网站的链接： inclouds.co.uk



这是我的html代码： 

 < div id =header> 
 
 
< div class =block1> 
 
< a> InClouds托管商业服务< br>< br /> < / a>< br /> 
 
 >< ul> 
< li>托管桌面& amp; amp; amp;服务器< / li> 
< li>托管IP电话< / li> 
< li>托管电子文件管理< / li> 
< li>私有云：MPLS核心网络< / li> 
< / ul>< / strong> 
< / div> 
 
 
 
< div class =block2> 
< img width =200height =60src =img / logo.pngalt =/> 
< br />< br /> 
< subheading>托管IT&电讯< br />< h3>商业通讯< / h3>< / subheading> 
 
< / div> 
 
< div class =block3> 
< cont> 
< h1> < img src =img / tel.jpgwidth =25pxheight =20px/> 0845 355 1200< / h1>< br /> 
< img src =img / email-icon.jpgwidth =24height =22/>< h2> info@inclouds.co.uk< / H2>< /续> 
 
< / div> 
 
 
 
 
< / div> 
 
< div id =navbar> 
 
< form name =form1method =postaction =http://www.google.com/searchmethod =getonSubmit =Gsitesearch（this）> ; 
< label for =search>< / label> 
< input type =textname =searchid =search1style =width：150px; height：15px; > 
< / form> 
 
< div class =menu> 
< ul id =nav> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>关于< / 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.pngalt =loginlongdesc =http：//www.inclouds。 co.uk/loginhref =login.html>< / a> < /登录> 
< / div> 
 
< div id =feature> 
 
 
 
< div id =page> 
 
< / div> 
 
 
 
 
< / div> 
< / div> 
< div id =container> 
< div id =main> 
< div id =sidebar> 
 
< div id =sidebarA> 
 
<标题>托管服务< /标题> 
 
 
 
 
< / div> 
< div id =sidebarB> 
 
< img src =img / callus.png/> 
 
< / div> 
< / div> 
 
< div id =services> 
 
< a href =＃>< img id =sBox1src =img / 1.pngalt =/>< / a> 
< a href =＃> < img id =sBox2src =img / 2.pngalt =/>< / a> 
< a href =＃> < img id =sBox3src =img / 3.pngalt =/>< / a> 
< a href =＃> < img id =sBox4src =img / 4.pngalt =/>< / a> 
< a href =＃> < img id =sBox5src =img / 5.pngalt =/> 
< a href =＃> < img id =sBox6src =img / 6.pngalt =/>< / a> 
< a href =＃> < img id =sBox7src =img / 7.pngalt =/>< / a> 
< a href =＃>< img id =sBox8src =img / 8.pngalt =/>< / a> 
< a href =＃>< img id =sBox9src =img / 9.pngalt =/>< / a> 
 
< / div> 
< div id =sidebar2> 
<标题>关于我们< /标题> 
< featured1> 
 
 
< script type =text / javascript> 
 
 var marqueewidth =155px
 var marqueeheight =430px
 var marqueespeed = 1 
 var initPause = 1000 
 var full = 1 
 var bauseit = 1 
 var iebreak ='< p>< / p>'
 
 var marqueecontent ='< font face =Arial> InClouds提供我们的IT电信，网络和电信基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐amet，consetetur sadispscing alitr。 < / p> InClouds为我们的IT电信，网络和运营提供支持。基础设施都通过他们的私有云。这已经大幅改变并改善了我们现在工作的方式。< / p>< p> Lorem ipsum dolor坐amet，consetetur sadipscing elitr。 Lorem ipsum dolor坐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 
 
函数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//表示以下＃1 
} 
否则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 =填充
 
函数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：hiddenonMouseover =copyspeed = pausespeedonMouseout =copyspeed = marqueespeedscrollamount =1>'）
 write（'< div id =iemarqueestyle = position：absolute; left：0px; top：0px; width：100％;>'）
 write（'< / div>< div id =iemarquee2style =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_marquee2width ='+ marqueewidth +'height ='+ （'< / ilayer>'）
} marqueeheight +'left = 0 top = 0 onMouseover =copyspeed = pausespeedonMouseout =copyspeed = marqueespeed>< / layer> 
} 
} 
< / script> 
< / featured1> 
< / div> 
< / div> 
 
< div id =footer-wrapper> 
< div id =footer> 
 
< div id =partner> 
< img src =img / partnerslogo.pngalt =/> 
< / div> 
 
< div id =footer-links> 
 
< div class =f1> 
 
< strong>< ftr_header> Sitemap< / ftr_header>< / strong>< br /> 
< a href =/>主页< / a>< br /> 
< a href =/>为什么选择Netplan？< / a>< br /> 
< a href =/>哲学< / a>< br /> 
< a href =/>绿色政策< / a>< br /> 
< a href =/>服务等级协议< / a>< br /> 
< a href =/> PCI DSS托管< / a>< br /> 
< a href =/>联络详情< / a>< br /> 
< a href =/>博客< / a>< br />< br />< br />< br /> < br /> 
< a href =/>< img src =img / cookie-policy.pngwidth =200pxheight =73px/>< / a> 
 
< site>网站依据：< / site> 
< ba>< img id =imgsrc =img / propromo.pngwidth =100pxheight =20px>< / ba> 
< / div> 
 
< div class =f2> 
 
< strong>< ftr_header> Sitemap< / ftr_header>< / strong>< br /> 
< a href =/>主页< / a>< br /> 
< a href =/>为什么选择Netplan？< / a>< br /> 
< a href =/>哲学< / a>< br /> 
< a href =/>绿色政策< / a>< br /> 
< a href =/>服务等级协议< / a>< br /> 
< a href =/> PCI DSS托管< / a>< br /> 
< a href =/>联络详情< / a>< br /> 
< a href =/>博客< / a>< br />< br /> 
 
< / div> 
 
< div class =f3> 
 
<标题> InClouds Hosted Business Services< / heading>< br />< br />< add> 
金丝雀码头1号加拿大广场1楼29楼
伦敦，英国E14 5DY< br />< br />< / add> 
< / div> 
< div class =f4> 
< quote>引用行< / 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.pngwidth =40pxheight =40px/><一个>< /锂> 
< li>< a href =＃>< img src =img / Facebook-skins-post.pngwidth =40pxheight =40px/><一个>< /锂> 
< li>< a href =＃>< img src =img / LinkedIn_logo.pngwidth =40pxheight =40px/>< / a>< /立GT; 
< li>< a href =＃>< / a>< img src =img / rss-icon.pngwidth =40pxheight =40px < /锂> 
< / ul> 
< / div> 
< / div> 
 
< div id =wrapperform> 
< formHeader>在下面输入您的详细信息，我们会为您保留< br /> 
更新了相关行业信息和< br /> 
技术进步。 < / formHeader> 
< style type =text / css> 
 
 
< / div> 
< / div><！ -  footer  - > 
< / div>

css code： 

  @charsetutf-8; 
 / * CSS文档* / 
 
 
 #header_container {
 
宽度：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; 
职位：亲属; 
 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; 
颜色：＃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; 
宽度：33％; 
 float：left; 
职位：亲属; 
 top：85px; 
 
} 
 
 #header .block2副标题{
 
 
 font-size：18px; 
 font-weight：600; 
颜色：＃003; 
 text-align：center; 
职位：亲属; 
 bottom：15px; 
 
} 
 
 #header .block2 img {
 
 text-align：center; 
} 
 
 
 .block3 {
 
 width：330px; 
 float：left; 
职位：亲属; 
 top：25px; 
} 
 
 
 
 #header .block3 cont {
 text-align：right; 
 float：right; 
} 
 
 #navbar {
 width：990px​​; 
 height：50px; 
 margin-left：auto; 
 margin-right：auto; 
职位：亲属; 
 bottom：5px; 
} 
 
 #navbar form {
 float：left; 
职位：亲属; 
 top：10px; 
 padding：0; 
保证金：0; 
 
} 
 
 
 #nav li {
 float：left; 
 width：100px; 
 line-height：10px; 
 list-style：none; 
 margin-right：5px; 
 text-align：center; 
 display：block; 
 font-weight：bold; 
颜色：＃003; 
} 
 
 #nav li a {
 text-decoration：none; 
 font-size :: 18px; 
颜色：＃003; 
 
} 
 
 #nav li a：hover {
 color：＃09F; 
 font-weight：bold; 
 text-decoration：none; 
 border-bottom：固体培养基＃09F; 
} 
 
＃search1 {
 width：150px; 
 height：20px; 
 background：白色url（../ img / searchicon.jpg）right no-repeat; 
 padding-right：10px; 
} 
 
输入
 {
 -moz-border-radius：15px; 
 border-radius：15px; 
 padding：5px; 
} 
 
 .menu {
 
 float：left; 
职位：亲属; 
 right：20px; 
 
} 
 
 #navbar .menu a {
 padding：0px; 
 margin：0px; 
} 
 
 #navbar .menu img {
 
 border：none; 
 height：40px; 
 
 
} 
 
 #navbar登录{
 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 bug修正* / 
填充：0; 
保证金：0; 
} 
 
 #slider img {
 height：416px; 
 text-align：center; 
} 
 
 #slider li {list-style：none; } 
 
 #page {
 position：relative; 
宽度：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; 
职位：亲属; 
} 
 
 #sidebar {
 
 float：left; 
 width：180px; 
 height：490px; 
} 
 #sidebarA {
 
 width：180px; 
 height：335px; 
 border：薄实体＃666; 
 -moz-border-radius：15px; 
 border-radius：15px; 
职位：亲属; 
 float：left; 
 
} 
 
 #sidebarB {
 
 width：180px; 
 height：140px; 
 border：薄实体＃666; 
 -moz-border-radius：15px; 
 border-radius：15px; 
 float：left; 
 margin-top：10px; 
} 
 
 #sidebarB img {
 
 position：relative; 
 left：17px; 
 bottom：8px; 
} 
 
 #sidebar标题{
 
 position：relative; 
 top：10px; 
 left：28px; 
 font-size：14px; 
颜色：＃333; 
 text-transform：大写; 
 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; 
职位：亲属; 
 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：薄实体＃666; 
 -moz-border-radius：15px; 
 border-radius：15px; 
职位：亲属; 
 float：left; 
 left：10px; 
 font-size：15px; 
 
} 
 
＃sidebar2标题{
 
 position：relative; 
 font-weight：BOLD; 
 left：50px; 
 top：10px; 
颜色：＃333; 
 text-transform：大写; 
 font-weight：550; 
} 
 
＃sidebar2 featured1 {
 
 position：relative; 
 top：25px; 
 left：15px; 
 font-size：13px; 
颜色：＃333; 
 margin-left：10px; 
 
} 
 
 
 
＃footer-wrapper {
 width：100％; 
 height：620px; 
 background：url（../ img / footerbackground.png）repeat-x; 
 text-align：left; 
职位：亲属; 
 bottom：30px; 
 
} 
 #footer {
 display：block; 
职位：亲属; 
 width：990px​​; 
身高：100％; 
 bottom：15px; 
 text-align：left; 
 margin-left：auto; 
 margin-right：auto; 
} 
 
 #footer .f1网站{
 
 font-size：14px; 
颜色：＃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; 
颜色：白色; 
 text-align：left; 
 left：26px; 
} 
 
＃footer-links {
 
 width：600px; 
 float：left; 
 font-size：10px; 
颜色：#FFF; 
职位：亲属; 
 top：15px; 
} 
 
 .f1 {
 float：left; 
职位：亲属; 
 top：64px; 
 width：200px; 
 font-style：normal; 
 line-height：15px; 
} 
 .f1 a {
 
 text-decoration：none; 
颜色：#FFF; 
 font-size：12px; 
} 
 
 
 .f1 a：hover {
 
 text-decoration：underline; 
} 
 
 .f1网站{
 position：relative; 
 top：45px; 
} 
 
 .f1 ba {
 position：relative; 
 top：40px; 
} 
 
 
 
 .f2 {
 float：left; 
职位：亲属; 
 width：100px; 
 
 line-height：15px; 
 top：64px; 
 font-style：normal; 
 
} 
 .f2 a {
 
 text-decoration：none; 
颜色：#FFF; 
 font-size：12px; 
} 
 
 
 .f2 a：hover {
 
 text-decoration：underline; 
} 
 
 .f3 {
 float：left; 
职位：亲属; 
 left：65px; 
 width：300px; 
 line-height：15px; 
 top：64px; 
 font-style：normal; 
 
} 
 .f3 a {
 
 text-decoration：none; 
颜色：#FFF; 
 font-size：16px; 
} 
 
 
 .f3 a：hover {
 
 text-decoration：underline; 
} 
 
 .f3标题{
 
 font-size：15px; 
颜色：#FFFFFF; 
 font-weight：bold; 
} 
 
 .f3添加{
 font-size：13px; 
} 
 
 .f4 {
 float：left; 
职位：亲属; 
 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电子邮件{
 font-size：20px; 
} 
 
 .f4 ul {
 
 float：left; 
职位：亲属; 
 right：40px; 
} 
 
 .f4 img {
 
 border：none; 
} 
 
 .f4 li {
 
 line-height：10px; 
 list-style：none; 
 display：inline; 
 padding-right：20px; 
 font-weight：bold; 
颜色：＃003; 
 
} 
 
 .low 
 {
字体：13px / 1.7'open sans'，sans-serif; 
颜色：＃333; 
 font-weight：300; 
} 
。低a 
 {
颜色：＃333; 
 text-decoration：none; 
 padding-bottom：1px; 
 border-bottom：1px solid #ccc; 
} 
 .low a：hover 
 {
 border：none; 
} 
 
 .light_image：hover 
 {
 opacity：0.8;


解决方案

链接已损坏，所以可以真的看不到你的网站。
就在我头上，尝试添加meta标签，如下所示： 

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


My site doesn't appear correctly in an ipad - portrait mode. It appears fine in landscape mode but when I turn it into portrait mode I end up with a messy website. All elements scattered all over the site. How can I fix this? Please help me.

here's the link to my site: inclouds.co.uk

Here's my html code:

<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 code:

@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;
}

解决方案

Link is broken, so can't really see your site. Just on top of my head, try adding meta tag like this:

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

这篇关于ipad纵向视图的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆