Question

我已经在网上浏览了大量的视频资源（在apple.com，quirksmode.org上），但我仍然感到困惑....

假设我有一个宽度为400像素的页面。现在我想优化同样的iPad观看..

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

这是否意味着我的字体大小会扩大到768px？ OR
我的页面会缩小，就好像是768像素的宽度而不是400像素？

如果我们将视口用于不同的场景，我不清楚效果是什么？

在任何页面上使用视口是否有任何负面影响（如果页面宽度＆lt;或＆gt;设置视口宽度）

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

谢谢。

Answer 1

我衷心建议您阅读这篇文章：http://www.quirksmode.org/mobile/viewports2.html 它可能会回答您关于视口的部分或全部问题。它确实帮助了我。

关键在于理解视觉视口（浏览器的像素宽度）和布局视口（CSS想要以像素为单位呈现网站的宽度）之间的差异。显然，在大多数情况下，布局视口将比可视视口大得多。

E.g。您的网站可能是950px宽，但浏览器的可视视口可能只有320px。通常移动浏览器会直接缩放以显示整个页面，但是到底能看到谁？

因此，在标记中设置<meta name="viewport" content="width=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，以便它知道调整字体大小，将类标记名重新设置为移动设备的格式。

希望有所帮助。

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

关于视口的问题

3 个答案: