问题

Question

问题

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

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

对于iPhone，我认为不言而喻：一个较小的，适合手机使用的网站（例如320px宽）是理想的选择。但对于iPad更大的屏幕，一个特殊的移动网站并不是必需的;使用正常的960px网站设计似乎是合适的。 320px的网站在iPad上看起来很简单，我并不总是想为iPad的768px设计第三种变体。

问题在于：我无法弄清楚如何使用元视口标记和CSS媒体查询来实现iPad上的正常网站 1）和2）iPhone上的移动网站。我发现使用JavaScript破解是可能的（例如，根据设备动态更改元视口标记），但我不想使用JavaScript;我不认为应该要求JS在具有静态内容的简单网站上实现基本的可用性。

1）如果我完全删除元视口标签，我的普通960px网站在iPad上显示完美，但在iPhone上显示不好（右侧空白边缘很大）：

Website example without meta viewport tag

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

Website example with meta viewport tag

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

标记/ 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>

Answer 1

将媒体查询与zoom合并。

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
    html {zoom:0.8;}
}

Answer 2

尝试在元标记中添加最大比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Answer 3

您可以使用JS来删除像Cole在此讨论的元视口标记 - http://cole007.net/blog/136/responsiveish-viewport-hack评论中还有另一个选项

Answer 4

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

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

...然后在头标记中的这个php：

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

效果很好。

如何使用元视口和CSS媒体查询使普通的960px网站在iPhone和iPad上看起来不错？

问题

标记/ CSS

4 个答案: