Question

我在这里有这个网站：

我将视口设置为：

<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类并以这种方式包含它们。

iphone和ipad肖像的视口

1 个答案: