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车身宽度不扩展到手机宽度

回答

相关问题