html – 关于视口的问题

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

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

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

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

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

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

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

谢谢.

最佳答案

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

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

例如.您的网站可能是950px宽,但浏览器的可视视口可能只有320px.通常移动浏览器会直接缩放以显示整个页面但是谁能读到它？

所以设置< meta name =“viewport”content =“width = 320”...>在您的标记中将布局视口设置为320px – 与可视视口相同！