CSS-视口中继标记真的必要吗?

我已经创建了一些响应式站点,但是对于响应式站点开发还是相当陌生的。 在我的CSS中,我有99%的值以em或百分比表示。 我正在使用媒体查询(最大宽度和最大设备宽度)进行布局更改。 我还没有包含viewport meta标签,它在iOS,我测试过的许多Android手机和平板电脑以及所有桌面浏览器上都可以完美运行。

添加元标记会破坏我的网站。 我是在做错什么,还是在做正确的事情,这样我就不需要包含它了? 我对为什么这似乎是一种最佳实践感到困惑,因为它破坏了我的工作。

我想念什么吗?

Jeffpowrs asked 2020-06-30T04:15:13Z
8个解决方案
66 votes

在桌面操作系统上,浏览器视口的宽度是固定的像素数,并且网页内容按原样呈现在其中。

从iOS上的Safari(或当时我们称为iOS的任何版本)开始,移动浏览器的视口一直是“虚拟”的。 尽管视口可能仅占用(例如)界面中320个物理像素的空间,但浏览器会创建一个更大的“虚拟”视口(我认为iOS上默认为980像素),并在那里显示内容, 然后缩小该虚拟视口,直到它适合设备屏幕上可用的实际物理像素为止。

视口meta标记可让您告诉移动浏览器该虚拟视口的大小。 如果您实际上并未更改网站的移动设计,这通常很有用,并且使用较大或较小的虚拟视口可以更好地呈现。 (我认为选择980像素作为默认像素是因为它在2007年渲染很多备受关注的网站方面做得很好;对于任何给定的网站,不同的值可能会更好。)

我个人总是使用<meta name="viewport" content="width=device-width, initial-scale=1">,以便虚拟视口与设备尺寸匹配。 (请注意,使虚拟视口适应iOS上的横向模式似乎是initial-scale=1所必需的。)这使移动浏览器的行为类似于台式机浏览器始终具有的行为,这是我惯用的。

没有视口元标记,您的网站将呈现到设备的默认虚拟视口中。 我认为这不一定是问题,特别是如果您所用的单位都是em或百分比。 但是,如果您需要在任何时候考虑像素,这可能会有些混乱,尤其是因为不同的浏览器可能具有不同大小的默认虚拟视口。 如果后续的维护人员不了解该方法,也可能会造成混淆。

我想您将基本字体大小设置得很大,这样可以看清楚吗? 您可以链接到您这样创建的网站之一,以便我们查看示例吗?

Paul D. Waite answered 2020-06-30T04:15:47Z
9 votes

如果没有视口,则您的设备将使用虚拟视口,默认情况下,虚拟视口实际上是网站的缩小版本,在iPhone上约为980 px,在andriod上约为800 px。 设置视口并禁用此缩小后,设备会视其为网站,并根据设备和方向等以480px宽或320px左右的尺寸进行缩放。

在下面的全部资源中,我的建议是,每当您使用响应式和移动设备时,请始终先设置视口。 这是标准化设备缩放并确保使用实际设备宽度(而不是任何虚拟宽度)显示站点的最佳方法。

[HTTP://呜呜呜.JavaScript kit.com/对HTML tutors/CSS Media queries3.是HTML]

JamieM23 answered 2020-06-30T04:16:17Z
7 votes

所以回答我自己的问题。 这不是必要的。

您可以使用最小和最大宽度媒体查询在特定断点处设置桌面版本的样式。

然后,您主要更新平板电脑和手机的字体大小和其他属性。 就像我说的那样,这主要是为了提高可读性而增加字体大小。

但是,此方法存在主要的可维护性问题。

通过视口元标记,您可以简单地使用从台式机到移动设备的最大和最小宽度。

Jeffpowrs answered 2020-06-30T04:16:54Z
5 votes

您绝对应该使用视口标签,因为它们可以使Web开发人员的生活变得无限简单。 它们使您可以轻松控制任何屏幕的精确渲染尺寸和/或缩放级别(如果需要,甚至可以在桌面上)。 这使得为任何设备建立网站变得轻而易举。 但是要知道,强大的力量伴随着巨大的责任。 明智地使用此功能(并且不要禁用缩放)。

JoostS answered 2020-06-30T04:17:15Z
4 votes

并非适用于所有设备,但适用于手机。移动浏览器在虚拟的“窗口”中呈现页面,该窗口通常比屏幕宽,因此它们不需要将每个页面布局都压缩到一个小窗口中(因此,它会破坏一些非移动优化的网站,用户必须 放大)。 Mobile Safari引入了“视口元标记”,以使Web开发人员可以控制视口的大小和比例。 现在,所有移动浏览器都支持此标记,即使它不是任何Web标准的一部分。典型的针对移动设备进行优化的网站应包含以下标记:

<meta name="viewport" content="width=device-width, initial-scale=1">

width属性控制视口的大小。 屏幕宽度,以CSS像素为单位,缩放比例为100%。initial-scale属性控制页面首次加载时的缩放级别。 最大比例,最小比例和用户可缩放属性控制如何允许用户放大或缩小页面。

[https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19]

Shantanu answered 2020-06-30T04:17:45Z
2 votes

您仍然可以使用视口meta标签来优化设备视图的分辨率并使用户能够缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">

使用定义的最大比例,您可以控制用户缩放的方式。 我想我们应该启用该选项,因为即使我希望使用响应式网站进行缩放,它也已经知道,它是如此直观以至于令人期待。

Alexandre Magno Teles Zimerer answered 2020-06-30T04:18:10Z
1 votes

是的,它是开发响应式网站的必要标签。但是,单独使用该标签并不能帮助您实现此目的,但是通过允许您控制网页可见内容的大小,它们确实确实可以更轻松地开发响应式网站。 。

aditya answered 2020-06-30T04:18:30Z
0 votes

对于任何有疑问的人,最简单的方法就是在没有它的情况下进行测试。 我这样做了,很快就解决了-如果我只需要保留一个meta标签,就是这样(在“ description”(描述)之上)。 实际上,如果我只能在这一个和所有其他之间做出选择,我会全力以赴。 只是测试一下!

Lucian Davidescu answered 2020-06-30T04:18:51Z
translate from https://stackoverflow.com:/questions/14775195/is-the-viewport-meta-tag-really-necessary