iPhone和iPad肖像的视口

Question

我在这里有这个网站：

http://powellgroupconstruction.com/

我已经设置了视口：

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

这在我的iPad景观上看起来很棒。但是在我的iPhone网站上，一切看起来都很大！在景观上，它太宽了...这与视口有任何关系，或者我需要进行媒体查询我的CSS页面包装器：

.contentPowell {
background-color: #FFF;
width: 1024px;
min-height: 300px;
margin: 0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
position: relative;
z-index: 999999;
padding-bottom: 30px;
}

我的页脚？

.footerPowell{ width:1024px; }

Answer 1

如果是我，我会将iPhone版本构建至320px宽度，并像示例中一样使用1.0的视口。您当前的代码是为1024px构建的，因此视口将iPhone视图约为1/3，并且可以左右滚动。

这是使用相同代码构建为320px的iPhone版本的一个示例，其中仅更改了一些元素，以及下面显示的次要CSS更新。

在iPhone上打开此视图，我认为您要打算：http://miroapps.com/test.html

<style type="text/css">
    .entry-content ul{ list-style:none; float:left; width:90%; }
    .entry-content ul li{ float:left;
                        /*width:33%;*/
                         background-color:#000; margin:5px; max-height:234px; padding-bottom:30px; }
    .entry-content ul li a{ color:#FFF; text-decoration:none; }
    .entry-content ul li a:hover{ text-decoration:none; }
    .entry-content ul li a:visited{ color:#FFF; }
    .entry-content ul li a h2{ text-align:center; margin-bottom:0px; }
    .entry-content ul li a h2 a{ }
    .entry-content ul li a h2 a img{ margin-top:15px; }
    .contentPowell {
        width: 320px;
    }
    .entry-content {
        width:320px;
    }
</style>

然后，您将为iPad留下现有代码，也许只是以某种方式进行设备检测，以包括仅适用于iPhone的320px替代。或者，仅包括用于iPhone的CSS课程，并以这种方式包括在内。