Div寬度在手機瀏覽器中無法均勻調整大小

我正在建立一個非響應式網站，其頁眉的頁腳跨越了瀏覽器窗口的整個寬度。在寬度爲100％的DIV內部，我嵌套了寬度爲1000px的div，其中包含標題，導航和頁腳內容。Div寬度在手機瀏覽器中無法均勻調整大小

我的問題是在移動設備上瀏覽的網站時，導航和頁腳被縮放到被擊落的尺寸比所述報頭和所述網站的主區域稍小。

什麼奇怪的是，當他們與頭部沒有問題（即建有同樣的方法）導航和頁腳都受到影響。

我怎樣才能得到一切按比例縮放？整個網站和所有主要div的寬度是1000px，那麼他們爲什麼在移動設備上出現不同的尺寸？

下面是該網站的URL：http://www.test-site.co.nf

下面是一個代碼示例：

HTML：

</head> 

<body> 
<div id="container"> 
<div id="header"> 
<div id="header-content"> 
<div id="logo"> 
<a href="index.html"><img src="img/ama-party-rentals-logo.png" height="98" width="500"/></a> 
</div> 
<div id="social-icons"> 
<a href="" target="_blank"><img class="social" src="img/icons/facebook.png" height="40" width="40"/></a> 
<a href="" target="_blank"><img class="social" src="img/icons/googleplus.png" height="40" width="40"/></a> 
</div> 
</div> 
</div> 
<div id="nav-bar"> 
<div id="nav"> 
<ul id="ul-nav"> 
<li><a href="">Home</a></li> 
<li><a href="">Products</a></li> 
<li><a href="">Company</a></li> 
<li><a href="">Past &nbsp; Events</a></li> 
<li><a href="">Contact &nbsp; Us</a></li> 
<li><a href="">Francais</a></li> 
</ul> 
</div> 
</div>

CSS：

#header { 
    background-color:#84B13F; 
    width:100%; 
    height:150px; 
    border-bottom-style:solid; 
    border-bottom-color:#648830; 
    border-bottom-width:5px; 




} 

#header-content 
{ 
    width:1000px; 
    height:150px; 
    text-align:center; 
    margin:auto; 
    background-image:url('img/top-banner.png'); 


} 

#nav-bar 
{ 
    width:100%; 
    height:50px; 
    background-color:#84B13F; 
    border-bottom-style:solid; 
    border-bottom-color:#648830; 
    border-bottom-width:5px; 

} 

#nav 
{ 
     clear:both; 
     margin:auto; 
     height:50px; 
     width:1000px; 
     text-align:center; 

}

來源

2014-02-23 Jvanni

你可以將你的代碼添加到jsFiddle，所以我們可以玩它，看看是否可以找到解決辦法？ – Ismatjon

嗨，我實際上找出了答案，昨天晚上我只是無法發佈答案，直到今天，因爲我是一個新用戶。感謝您的迴應！ – Jvanni

然後把你的答案和標記，以便其他人可以從中受益 – Ismatjon

我可以看到兩個問題你現場。在CSS CASS盒-DIV

1）具有寬度1000和保證金左：20像素。因此，實際的1000px + 20px總計1020像素超出了您的佈局。

2）你的資產淨值規模爲1020px，但你的頭是1000像素，所以當你在手機或小型設備（最大屏幕999px）只顯示1000像素是有點小，則完整的網站。

更改標題的寬度1020px應該解決的問題。

更具體

#header-content{ 
     padding: 0px 10px; 
     /**your present css**/ 
    }

只需更新＃標題內容添加填充和您的網站是固定的。

來源

2014-02-23 21:28:21

謝謝，我修復了寬度溢出父div的外框，不幸的是這並沒有解決我的問題。 – Jvanni

boxes-div不會解決你的問題。 –

將頭和其他div更改爲1020px的寬度有助於使網站在移動瀏覽器上縮放至全寬，但它並未解決導航和頁腳無法按比例縮放的問題。爲包裝整個網站的div設置最小寬度確實解決了問題。 – Jvanni

好了，所以我想通了：

我的問題是，我有一個包裝的整個網站的容器DIV。在那個容器中，我將高度設置爲100％，但沒有定義寬度。我將最小寬度設置爲1020px，並且瞧;沒有更多的破碎，切斷divs。我的頁眉和頁腳div設置爲100％寬度縮小，但整個網站的縮放停止在1020px的寬度，所以我的所有內容都以我希望在移動設備和桌面上顯示的方式顯示。感謝所有迴應！

來源

2014-02-24 17:57:11 Jvanni

我幾天前就讓這個解決方案成爲您的問題。選擇我的答案作爲解決方案將是一項誠實的工作。 –

你告訴我改變頭沒有解決我的問題。但是，它間接地導致我找到解決方案，最終解決了我的問題。我應該給你信任的，我很抱歉，我沒有在我最後的評論中。感謝您抽出寶貴的時間。 – Jvanni

Div寬度在手機瀏覽器中無法均勻調整大小

回答

相關問題