视口元标记真的有必要吗？

Question

我创建了一些响应式网站,但对响应式网站开发来说却是新手.在我的CSS中,99%的值都是ems或百分比.我正在使用媒体查询(max-width和max-device-width)来进行布局更改.我没有包含一个视口元标记,它在iOS,我测试的许多Android手机和平板电脑以及所有桌面浏览器上运行良好.

添加元标记会破坏我的网站.我做错了什么,或者做了些什么事情以便我不需要包含它？我很困惑为什么它似乎是一种最佳实践,因为它打破了我的东西.

我错过了什么吗？

Answer 1

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

从iOS上的Safari开始(或者当时我们应该调用iOS的任何东西),移动浏览器视口一直是"虚拟的".虽然视口可能只占用(例如)界面中320个物理像素值的空间,但浏览器会创建一个更大的"虚拟"视口(我认为iOS上默认为980像素宽)并在那里呈现内容,然后将该虚拟视口缩小,直到它适合设备屏幕上可用的实际物理像素.

视口元标记允许您告诉移动浏览器此虚拟视口应具有的大小.如果您实际上没有更改网站的移动设计,这通常很有用,并且通过更大或更小的虚拟视口渲染效果更好.(我认为980像素被选为默认值,因为它在2007年很好地渲染了许多高端网站;对于任何给定的网站,不同的值可能会更好.)

就个人而言,我总是使用<meta name="viewport" content="width=device-width, initial-scale=1">虚拟视口与设备尺寸匹配.(注意,initial-scale=1似乎有必要使虚拟视口适应iOS上的横向模式.)这使得移动浏览器的行为就像桌面浏览器一样,这就是我习惯的.

如果没有视口元标记,您的网站将呈现到设备的默认虚拟视口中.我认为这不一定是个问题,特别是如果你所说的所有单位都是ems或百分比.但是如果您需要在任何时候考虑像素,可能会有点混乱,特别是因为不同的浏览器可能具有不同大小的默认虚拟视口.如果他们不理解这种方法,那么后续的维护者也可能会感到困惑.

我想你设置你的基本字体大小非常大,所以它是清晰的？你能链接到你这样创建过的网站吗,所以我们可以看一个例子吗？

Answer 2

如果没有视口,您的设备将使用虚拟视口,默认情况下,该视口实际上是您网站的缩小版本,在iPhone上为980像素,在andriod上为800像素.设置视口并禁用此缩小后,设备会按原样处理网站,并根据设备和方向等测量宽度约为480像素或320像素.

完整资源如下所示,我的建议是,无论何时使用响应式和移动设备,始终先设置视口.这是规范设备缩放的最佳方式,并确保使用实际设备宽度而不是任何虚拟宽度显示您的站点.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

Answer 3

所以回答我自己的问题.没有必要.

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

然后,您主要更新专门为平板电脑和手机设置的字体大小和其他属性.就像我说的那样,主要是增加字体大小以提高可读性.

该方法虽然具有主要的可维护性问题.

视口元标记允许您简单地使用从桌面到移动设备的最大和最小宽度.

Answer 4

并非适用于所有设备，但适用于手机。移动浏览器在虚拟“窗口”中呈现页面，视口通常比屏幕更宽，因此他们不需要将每个页面布局都压缩到一个小窗口中（因此它破坏了一些非移动优化的网站，用户必须飞涨）。Mobile Safari引入了“视口元标记”，让 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

Answer 5

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