关于视口的问题

Question

我已经在网上浏览了很多关于视口的资源（在 apple.com、quirksmode.org 上），但仍然有点困惑......

假设我有一个宽度为 400 px 的页面......现在我想优化iPad 观看也是如此。

如果我将元视口设置为设备宽度（我认为这意味着 iPad 在任何方向上都是 768px）；

1. 这是否意味着我的字体大小会放大为 768px ？或者
2. 我的页面会缩小，就好像它的宽度是 768 像素而不是 400 像素？

我不太清楚如果我们在不同的场景下使用viewport会产生什么效果？

在任何页面上使用视口是否有任何负面影响（如果页面宽度<或>设置的视口宽度）

有人可以以一种易于理解的方式帮助我..

谢谢。

Answer 1

我衷心推荐阅读这篇文章： http://www.quirksmode.org/mobile/viewports2.html< /a>
它可能会回答您有关视口的部分或全部问题。这当然对我有帮助。

关键是要理解视觉视口（浏览器的像素宽度）和布局视口（CSS 想要以像素为单位渲染站点的宽度）之间的区别。显然，在大多数情况下，布局视口将比视觉视口大得多。

例如，您的网站可能有 950 像素宽，但浏览器的视觉视口可能只有 320 像素。通常移动浏览器会向右缩小以显示整个页面，但谁能读懂呢？

因此，在标记中设置 将布局视口设置为 320px - 与视觉视口相同！

Answer 2

好的，为了消除对媒体查询的困惑，您需要了解使用媒体查询的概念。

    @media (min-width: 768px) and (max-width: 980px) { /*css here*/} 

它检查浏览器的视口并将内部CSS代码强加给浏览器。您将在视图端口范围的不同媒体查询中设置不同的 CSS。代码将在 css 文件中为：

    @media (min-width: 320px) and (max-width: 480px) { /*css here*/}
    @media (min-width: 481px) and (max-width: 768px) { /*css here*/}
    @media (min-width: 769px) and (max-width: 980px) { /*css here*/}
    @media (min-width: 981px) and (max-width: 1024px) { /*css here*/}
    @media (min-width: 1025px) and (max-width: 1240px) { /*css here*/}

还有另一种方法。根据媒体查询添加不同的 CSS 文件，如下所示：

   <link type="text/css" rel="stylesheet" media="(min-width: 320px) and (max-width: 480px)" href="ipad.css" />
   ...
   ...

因此，根据这些查询，您可以为相同的输出设置不同的样式。现在，如果您想施加实际上不在浏览器中的不同视口大小，那么您必须设置元标记。

    <meta name="viewport" content="width=320, ... ">

这意味着，浏览器设置了它的视口，并会根据实际的浏览器视口大小按需缩小或放大。它仅适用于“Opera Mobile 11”及更高版本。因此，如果您的浏览器视口为 360 且元设置为 320，则它将按比例放大或放大 1.125 倍。

Answer 3

根据我的理解（我对所有媒体查询和一起使用视口有点困惑），如果你将视口设置为 480px 并且 iPad 更大，那么它看起来就像在台式电脑上一样。它会忽略这一点，因为它对于 ipad 来说并不是那么小的视口。

除非您专门为 iPad 创建一个名为 (ipad.css) 的特定文件，并为该宽度和该宽度之间的设备添加单独的媒体查询。例如。

<link type="text/css" rel="stylesheet" 
 media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"
 href="ipad.css" />

或使用媒体查询

@media screen and (orientation:portrait) {}
@media screen and (orientation:landscape) {}

您还可以重置设备的CSS，以便它知道将字体大小、类标记名调整回移动设备应有的样子。

希望有帮助。

以下是我一直在使用的一些资源：

• 如何使用 CSS3 方向媒体查询
• 使用 CSS3 媒体查询定位 iPhone 和 iPad