如何使用元视口和CSS媒体查询，使平均960px网站在iPhone和iPad上看起来不错？ [英] How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?
问题描述
我知道Stack Overflow有很多关于meta viewport标签的问题，但是我找不到任何人问什么是最好的明显有用的问题：
I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can't find anyone asking what seems to be the most obvious and useful question:
如何使用meta视口和CSS媒体查询，使iPad（和桌面）平均960px的网站设计看起来不错，同时为iPhone和其他手机仍然保留较小的视口和网站设计（例如，320像素）？
对于iPhone，说：一个更小，手机友好的网站（例如，320像素宽）是理想的。但对于iPad的大屏幕，一个特殊的移动网站不是真的有必要;使用正常的960px网站设计看似合适。一个320px的网站在iPad上看起来很酷，我不总是想为iPad的768像素设计第三个变体。
For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.
这里有问题：了解如何使用meta视口标记和CSS媒体查询来实现 1）iPad上的正常网站，以及2）iPhone上的移动网站。我意识到这是可能的JavaScript黑客（例如，根据设备动态改变元视口标签），但我不想使用JavaScript;我不认为JS应该需要在一个简单的网站上实现基本的可用性与静态内容。
Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.
1）如果我删除meta视口标签，我的正常960px网站在iPad上看起来非常完美，但在iPhone（右侧大空白边距）上效果不佳：
1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):
2）另一方面，如果我使用< meta name =viewportcontent =width = device-width/> ，那么这个网站在iPhone上看起来不错，缩放到768像素，网站溢出到视口外）：
2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):
这似乎应该是世界上最简单的事情，但我还是无法解决。我缺少什么？
This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?
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>
推荐答案
将媒体查询与缩放。
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
这篇关于如何使用元视口和CSS媒体查询，使平均960px网站在iPhone和iPad上看起来不错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
