题
我知道有关关于Meta视口标签的Stack Overflow有很多问题,但是我找不到任何人问什么是最明显和最有用的问题：
如何使用元视口和CSS媒体查询来使平均960像素的网站设计在iPad(和桌面)上看起来不错,而iPhone和其他手机仍然保留较小的视口和网站设计(例如320像素)？
对于iPhone来说,我认为这是一个较小的手机友好的网站(例如320像素宽)是理想的.但是对于iPad的大屏幕来说,一个特殊的移动网站并不是必需的;使用正常的960px网站设计似乎是合适的.一个320px的网站在iPad上看起来很酷,而我并不总是想为iPad的768像素设计第三个变体.
这里的问题是：我无法弄清楚如何使用元视口标签和CSS媒体查询来实现1)iPad上的正常网站,以及2)iPhone上的移动网站.我意识到可以使用JavaScript hacks(例如,根据设备动态更改元视口标签),但是我不想使用JavaScript;我不认为JS应该在一个简单的静态内容网站上实现基本的可用性.
1)如果我完全删除了Meta视口标签,我的普通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>
解决方法
组合媒体查询与缩放.
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
