0

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

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

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

更新 - 截图如下。 在此处输入图像描述

4

1 回答 1

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!
}
于 2013-05-19T20:27:35.900 回答