14

问题

我知道 Stack Overflow 上有很多关于元视口标签的问题，但我找不到任何人问什么似乎是最明显和最有用的问题：

如何使用元视口和 CSS 媒体查询使平均 960 像素的网站设计在 iPad（和桌面）上看起来不错，同时仍然为 iPhone 和其他手机保留较小的视口和网站设计（例如 320 像素）？

对于 iPhone，我认为这是不言而喻的：一个更小的、对手机友好的网站（例如，320 像素宽）是理想的。但对于 iPad 的大屏幕来说，一个专门的移动网站并不是必需的。使用正常的 960px 网站设计似乎是合适的。一个 320px 的网站在 iPad 上看起来很滑稽，我并不总是想为 iPad 的 768px 设计第三个变体。

这就是问题所在：我不知道如何使用元视口标签和 CSS 媒体查询来实现1) iPad 上的普通站点和 2) iPhone 上的移动站点。我意识到 JavaScript hacks 是可能的（例如，根据设备动态更改元视口标签），但我不想使用 JavaScript；我认为不应该要求 JS 在具有静态内容的简单网站上实现基本可用性。

1）如果我完全删除元视口标签，我的正常 960px 网站在 iPad 上看起来很完美，但在 iPhone 上却很糟糕（右侧大空白边距）：

没有元视口标签的网站示例

2）另一方面，如果我使用<meta name="viewport" content="width=device-width" />，则该网站在 iPhone 上看起来很棒，但在 iPad 上却很糟糕（放大到 768 像素，网站溢出视口）：

带有元视口标签的网站示例

这似乎应该是世界上最简单的事情，但我一直无法解决它。我错过了什么？

标记/CSS

CSS：

<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>

<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>

标记：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
4

4 回答 4

10

将媒体查询与zoom.

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
    html {zoom:0.8;}
}
于 2012-08-13T18:12:31.800 回答
5

尝试将最大比例添加到您的元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
于 2012-11-25T08:21:43.220 回答
1

您可以使用 JS 撕掉像 Cole 在这里讨论的元视口标签 - http://cole007.net/blog/136/responsiveish-viewport-hack评论中还有另一个选项

于 2013-01-28T07:35:18.330 回答
0

我使用 Serban Ghita 的 php Mobile Detection 方法：

https://github.com/serbanghita/Mobile-Detect

...然后这个 php 在 head 标签中：

<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>

效果很好。

于 2014-01-13T11:37:11.107 回答