HTML和CSS頁腳，在iPhone上的寬度短

我有這個網站http://northshorelandscapefirm.ca/它看起來不錯，在所有的瀏覽器中，除了在iphone上...頁腳的寬度比在web瀏覽器上短....沒有人知道我是什麼談論？HTML和CSS頁腳，在iPhone上的寬度短

這裏是我的代碼

<div class="footerWrapper"> 
<div class="footer"> 

<div class="footerNav"> 
<ul> 
<li><a href="home.php">Home</a></li> 
<li><a href="about.php">About Us</a></li> 
<li><a href="gallery.php">Gallery</a></li> 
<li><a href="services.php">Services</a></li> 
<li><a href="contact.php">Contact Us</a></li> 
</ul> 
</div><!--footerNav--> 

<div class="footerContact"> 
<ul> 
<li>Email - <span style="text-transform:lowercase"><a href="mailto:[email protected]">[email protected]</a> | <a href="mailto:[email protected]">[email protected]</a></span></li> 
<li> | </li> 
<li>PHONE - <a href="callto:+5555555555">555.555.5555</a> | <a href="callto:+5555555555">555.555.5555</a></li> 
</ul> 
</div><!--footerContact-->

和CSS

.footerWrapper{ 
    width:100%; 
    background:#000; 
    float:left; 
    padding-bottom:20px; 
} 

.footerNav{ 
    padding-top:10px; 
    margin: 0 auto; 
    position: relative; 
    width:1080px; 
    z-index:1000; 
} 

.footerNav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0 0 0 8px; 
} 

.footerNav li { 
    float: left; 
} 

.footerNav ul a { 
    color: #FFFFFF; 
    display: block; 
    padding: 0 30px 0 0; 
    text-decoration: none; 
    font-size:36px; 
    text-transform:uppercase; 
} 

.footer{ 
    margin: 0 auto; 
    position: relative; 
    width: 1101px; 
    background-color:#888888; 
    min-height:145px; 
    opacity:0.44; 
    filter:alpha(opacity=44); 
} 

.footerContact{ 
    margin: 0 auto; 
    position: relative; 
    width: 1200px; 
    padding-top: 108px; 
} 

.footerContact ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0 0 0 8px; 
} 

.footerContact li { 
    float: left; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 30px 0 0; 
    text-decoration: none; 
    font-size:20px; 
    text-transform:uppercase; 
} 

.footerContact Ul a{ 
    text-decoration:none; 
    color:#FFFFFF; 
}

它的代碼了很多，但我知道，如果有人能夠幫助這將不勝感激，

先進感謝， J

來源

2012-05-24 user979331

手機總是略有不同。有可能你需要在頂部添加javascript以檢查iphone，以及是否從專門爲iphones配置的不同CSS文件中提取iphone。怎麼做？我不知道，但它是可能的。 – Tony318

只需跟進Tony318的回答。你可以使用類似的東西：

if (window.navigator.userAgent.indexOf('iPhone') != -1) { 
    //iphone specific code to resize footer 
}

來源

2013-02-28 11:51:22

HTML和CSS頁腳，在iPhone上的寬度短

回答

相關問題