CSS車身寬度不擴展到手機寬度

我測試基本佈局：CSS車身寬度不擴展到手機寬度

<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="./../public/css/main.css"> 
    </head> 
    <body> 
    </body> 
</html>

而且有主體元素的風格

background-color: rgb(255, 0, 0); 
color: rgb(51, 51, 51); 
display: block; 
font-family: 'Segoe UI', Ubuntu, Roboto, 'Helvetica Neue', 'Open Sans', Arial, sans-serif; 
font-size: 14px; 
height: 1091px; 
line-height: 20px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
min-height: 100%; 
min-width: 1024px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
width: 1024px;

的事情是，我確信，車身寬度會被縮放並適合手機尺寸。但是當我在iPhone 3GS水平滾動條上出現時進行測試。爲什麼寬度不縮放？

來源

2013-11-15 Tamara

爲什麼不使用margin：0;和填充：0;？較少的代碼.. –

將以下元標記添加到您的頭部，以避免用戶可以縮放。' –

添加以下到你的頭：

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />

來源

2013-11-15 13:15:26 ggdx

。可能不是OP在1024像素寬頁面上想要的內容 – Turnip

OP沒有提到這一點，只是在某些設備上滾動條出現。 – ggdx

以下元標記添加到您的文檔的頭：

<meta name="viewport" content="width=device-width, initial-scale=1" />

來源

2013-11-15 13:15:39 Turnip

這是因爲你定義：

min-width: 1024px; 
width: 1024px;

你應該刪除這兩個，並定義元：

<meta name="viewport" content="width=device-width">

來源

2013-11-15 13:15:46 Bigood

添加會使頁面的寬度等於320px。但這不是我想要的。我希望頁面的最小寬度爲1024像素，我希望頁面的大小適合移動屏幕（如縮小）。我想知道這有可能嗎？ :) – Tamara

@Tamara對不起，我不明白...如果你想渲染它，因爲它縮小了它的原始尺寸，不要使用視口元（？） – Bigood

CSS車身寬度不擴展到手機寬度

回答

相關問題