Question

我正在尝试使我的网页显示的页面宽度等于手机屏幕的宽度。因此，例如，html页面的分辨率将是查看它的电话屏幕的分辨率。如果在计算机上查看它，我希望它显示在一边有白色寄宿生的div中。所以，我在我的CSS中做到了这一点：

html {
  max-width: 400px;
  margin: 0 auto;
}

但是当iphone屏幕的宽度小于400px时，整个页面只是在iPhone屏幕上缩小了？为什么？我该如何解决这个问题？

更新 - 截图如下。 enter image description here

Answer 1

http://jsfiddle.net/8KwVE/2/

您可以尝试使用响应式主题。

HTML

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

CSS

//iphone is horizontal
@media only screen and (max-width : 480px) {
    body{
        width:100%;
    }
    //other code!
}
//iphone is vertical
@media only screen and (max-width : 320px) {
    body{
        width:100%;
    }
    //other code!
}

max-width对iPhone没有影响

1 个答案: