html – 如何使用元视口和CSS媒体查询使平均960px网站在iPhone和iPad上看起来不错？

题

我知道有关关于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”/&gt,那么该网站在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;}
}

html – 如何使用元视口和CSS媒体查询使平均960px网站在iPhone和iPad上看起来不错？

解决方法

相关文章