頁面在移動瀏覽器中放大並且不是全視口寬度

我遇到了響應式設計問題。由於它是移動優化的，我包含了一個視口元標記，它應該確保頁面在沒有任何縮放的情況下加載並佔用完整的視口。然而，這裏是發生了什麼：頁面在移動瀏覽器中放大並且不是全視口寬度

作爲參考，下方的工具欄菜單的位置是：固定的，因此不包括在正常的頁面流，使其成爲「正常」寬度。這發生在Chrome和Firefox移動設備上，所以我認爲它不依賴於瀏覽器。 Chrome遠程設備調試會話顯示標題與<主體>和<html>元素完全一樣寬，所以問題出在頁面本身而不是單獨使用標題。

這裏是我的代碼（菜單簡明，刪除）：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    </head> 

    <body> 
    <div id="header"> 
     <h1>TremeClothing</h1> 
     <form id="search" action="page.php?stuff=things"> 
     <input type="text" name="search" autocomplete="off" spellcheck="false" /> 
     </form> 
    </div> 
    </body> 
</html>

和：

body { 
    margin: 0; 
    padding: 0; 
    background-color: rgb(240, 240, 240); 
    font-size: 20pt; 
} 

#header { 
    width: 100%; 
    padding: 0.5rem 1rem 1rem 1rem; 
    background-color: rgb(0, 51, 51); 
    position: relative; 
    box-sizing: border-box; 
    text-align: center; 
} 

#header h1 { 
    display: inline; 
    margin: 0; 
    padding: 0; 
    color: rgb(102, 153, 153); 
    font-size: 3rem; 
} 

#search { 
    display: inline-block; 
    height: 3rem; 
    width: 16rem; 
    margin: 1rem 3rem 0 3rem; 
} 

#search input { 
    display: block; 
    height: 100%; 
    width: 100%; 
    padding: 0.5rem 0.5rem 0.5rem 3rem; 
    box-sizing: border-box; 
    background: rgb(102, 153, 153) no-repeat 0.5rem 0.5rem/2rem url(img/icons/search.svg); 
    color: rgb(0, 51, 51); 
    font-size: 1.5rem; 
    font-weight: bold; 
    border: none; 
    border-radius: 2rem; 
} 

#search input:focus { 
    outline: none; 
}

來源

2017-09-05 Nik

你的頁面縮放正確。

搜索欄已經開始滑落的頁面的原因是因爲你的#search有一個固定的寬度，16rem，其中，增加的3rem兩邊的固定利潤，就出來比你的手機屏幕稍寬。嘗試使用此爲您#search風格：

display: inline-block; 
height: 3rem; 
width: 80%; 
max-width: 16rem; 
margin: 1rem 10% 0 10%;

這將確保您的#search的寬度是液體，並在屏幕的寬度從不超過100％。

來源

2017-09-06 01:52:12 SpyderScript

頁面在移動瀏覽器中放大並且不是全視口寬度

回答

相關問題