iPhone网站版，推荐使用px或％？

Question

我还没有完成任何iPhone版本，所以我有这个问题，

为了能够正确浏览网站 - 即使用户将手机转动90º：

我应该在px中设置CSS还是在％？

中设置CSS

Answer 1

如果您以编程方式定位iOS设备，例如iPhone＆amp; iTouch然后我会使用与百分比相对的像素，但如果你没有针对这些设备并想要一个一站式移动网站（大多数智能手机），那么我会考虑使用百分比。

您可以在媒体查询中详细说明min-width max-width and min-device-width and max-device-width。

以下是有关媒体查询以及您可以执行的组合的更多信息;

/* Target iPhone Portrait */
@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }

/* Target Android Portrait larger than 320px Width */
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }

/* Target iPhone Landscape */
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }

/* Target Android Landscape */
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

Answer 2

您可以将％与一个css类一起使用，组件的大小将自动调整。

您还可以将px用于两个类，一个用于纵向，一个用于横向：

body[orient="portrait"] {
property: value;
}
body[orient="landscape"] {
property: value;
}

Answer 3

我个人会使用％，而不是px ......

您希望页面在旋转时变为100％，然后相应地移动内容。

“纽约时报”使用％，因为您可以看到该页面的横向位置，您将比纵向放大一些。

Answer 4

如果您要为iPhone构建非特定网站（如iphone.mywebsite.com这样的子网站），我建议使用Xavier建议的CSS媒体查询。除了指定min-width和max-width！

之外，您还可以执行更多操作

您可以指定设备类型（但许多设备无法像他们那样识别......），例如：screen handheld print tv等等 但最重要的是，您还可以设置浏览器窗口是portait还是landscape，resolution还是aspect-ratio等等......

对于％或px，我肯定会选择px，因为你希望使用％，所以很难有一些工作。因为如果您的用户附带iPhone或其他设备，您不一定需要相同类型的信息。 例如，你可以从你的网站上为iPhone用户取出所有沉重的图像，因为他们可能正在使用3G连接，因此加载你的网站要快得多！

你可以用CSS媒体查询做的真正nice example ...不幸的是，这不是我的工作......： - （