div寬度100％無法在移動瀏覽器中使用
[英]div width 100 percent not working in mobile browser
問題描述
我想做的事情，我認為非常簡單。 我正在構建的網站的標題是一種純色，需要跨越屏幕的整個寬度，無論它被瀏覽的是哪個瀏覽器。到目前為止，我創建的內容在台式機和筆記本電腦上都很棒，但是當我測試它時平板電腦或手機，標題不會一直向右。 標題內的內容確實跨越了一切，這對我來說真的很困惑。 我可以讓標題欄跨越整個寬度的唯一方法是將position屬性設置為static，這不是我對此站點所需要的，所以這對我沒有任何幫助。 下面是我正在使用的CSS和HTML。 有人可以看看它，讓我知道我錯過了什么。
HTML：
<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->
CSS：
html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}
5 個解決方案
解決方案1
20 已采納 2014-06-04 10:04:21
這也發生在我身上。 在桌面上調整大小很好，但由於我博客頂部的728px橫幅，移動設備看起來很糟糕。 在如此小的屏幕上放置寬橫幅而不會造成問題很難。 如果你沒有橫幅，也許你有一些太寬的元素，拋棄了設計的其余部分。
這解決了這個問題： <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> （這是在<head>...</head> ）
將初始比例從1.0降低到您的元素可以100％完全覆蓋整個頁面。 這個比例使我的文字有點小，但Flowtype.js幫了忙。 我可以選擇一個較小的橫幅，但我現在對這個解決方案很滿意。
更新：上述解決方案並非真正與設備無關。 例如，“縮放”可能在手機上看起來很棒，但在平板電腦上卻太小了。 你可能想要這個：
<meta name="viewport" content="width=800" />
這使您的所有設備都像800像素寬的屏幕。 或者你需要的任何寬度。 在我的Android手機和Nexus平板電腦上運行得非常漂亮。 我認為桌面瀏覽器會忽略“視口”設置，這對我來說很好。
解決方案2
9 2015-01-13 14:58:54
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
解決方案3
1 2014-03-29 14:56:51
我沒有在平板電腦或手機上測試過這個，但我認為問題在於為“容器”div設置固定寬度。 由於您為html，body和標題div設置了100％寬度，因此無論是瀏覽器，平板電腦還是手機，這些都將占據寬度的100％。 但是，“容器”div不是這種情況，因為它具有固定的寬度。 嘗試以這種方式重置“容器”div的寬度：
.container {
width: inherit;
margin: 0 auto;
text-align: center;
}
解決方案4
0 2016-02-29 18:44:04
基於PJ Brunet的回答，我有類似的樣式問題，但是沒有通過更改html頭中的元標記獲得足夠的多功能性。 相反，我將最小寬度值（以像素為單位）添加到css中。 以原始問題為例：
.header {
/* restrict the smallest device size to this width */
min-width: 475px;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
然后，您可以定位下一個常規大小的設備：
@media (min-width:641px) {
.header {
/* force devises with a smaller width to observe this style */
min-width: 700px;
}
}
也許不是最佳實踐，但它可以讓您將所有設計尺寸捕捉到更易於管理的組中以適應設計。
解決方案5
0 2016-12-05 15:34:58
你也可以給身體最小寬度。 類似於body {width：1200px;}，具體取決於您的寬度設置。 有些客戶可能想要在他們的手機中使用精確的桌面副本！
調整瀏覽器大小時，div寬度100％不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.