ios - iphone 和 ipad 纵向视口(viewport)

Question

我这里有这个网站:

http://powellgroupconstruction.com/

我将视口(viewport)设置为:

<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 上，该网站的一切看起来都很大!在风景上它有点太宽了...这与视口(viewport)有什么关系吗？或者我是否需要对我的 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 的视口(viewport)，就像您在示例中使用的那样。您当前的代码是为 1024px 构建的，因此视口(viewport)使 iphone View 大约为 1/3，并且它可以左右滚动。

这里是一个 Iphone 版本的例子，它被构建为 320px，使用相同的代码，只是改变了几个元素的宽度，以及如下所示的次要 css 更新。

在 iphone 上打开它以查看我认为您想要的 View : 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 类并以这种方式包含它们。