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

我已经创build了一些响应式网站,但对响应式网站开发来说却是一个新兴的事情 在我的CSS中,99%的值是以ems或百分比表示的。 我正在使用媒体查询(最大宽度和最大设备宽度)进行布局更改。 我没有包含视口元标记,它可以在iOS,我testing过的许多Android手机和平板电脑以及所有桌面浏览器上完美运行。

添加元标记会破坏我的网站。 我是否做错了什么,或者做了什么正确的事,这样我就不需要包括它了? 我很困惑,为什么这似乎是一个最好的做法,因为它打破了我的东西。

我错过了什么吗?

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

从iOS上的Safari(或任何我们本来应该调用iOS的)开始,移动浏览器视口一直是“虚拟”的。 尽pipe视口可能只占用接口中320个物理像素的空间,但浏览器会创build一个更大的“虚拟”视口(我认为在iOS上默认宽度为980像素),并在其中呈现内容,然后放大虚拟视口,直到它符合设备屏幕上可用的实际物理像素。

视口元标记允许你告诉手机浏览器这个虚拟视口应该是多大。 如果您实际上没有改变您的网站devise的移动设备,这通常是有用的,它可以使用更大或更小的虚拟视口更好地呈现。 (我相信980像素被选为默认,因为它在2007年做了很多高调的网站,对于任何给定的网站,不同的价值可能会更好。)

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

如果没有视口元标记,您的网站将被渲染到设备的默认虚拟视口中。 我不认为这是一个问题,特别是如果你所说的所有单位都是ems或百分比。 但是,如果您需要以像素为单位进行思考,特别是不同的浏览器可能具有不同大小的默认虚拟视口,则可能会有些混乱。 如果后来的维护人员不理解这个方法,这也可能会让人困惑。

我想你设置的基本字体相当大,所以它是清晰的? 你能链接到这样的网站之一,所以我们可以看到一个例子?

如果没有视口,您的设备会使用虚拟视口,默认情况下这是您的网站的缩小版本,这大约是iPhone上的980像素,andriod上的800像素。 只要您设置了视口并禁用了缩小,设备就会根据设备和方向等对待网站,尺寸大约为480px或320px。

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

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

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

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

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

这种方法虽然有一个主要的可维护性问题。

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

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

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

width属性控制视口的大小。 缩放比例为100%的CSS像素的屏幕宽度,初始缩放属性控制首次加载页面时的缩放级别。 最大规模,最小规模和用户可扩展属性控制着用户如何放大或缩小页面的方式。

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

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

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

用最大规模定义你可以控制用户如何缩放它。 我的事情我们应该有这个选项启用,因为即使有一个敏感的网站,我希望缩放,它已经知道,它是如此直观,成为期望。

你一定要使用视口标签 ,因为他们有能力让网页开发人员的生活变得更加简单。 它们允许您轻松控制任何屏幕的确切渲染尺寸和/或缩放级别(即使在桌面上也可以)。 这使得build立任何设备的网站小菜一碟。 但是要知道,大国有很大的责任。 明智地使用这个力量(并且不要DISABLE缩放)。

是的,这是开发响应式网站的必要标签。但是单独使用标签不会帮助您这样做,但它们确实可以让您更轻松地开发响应式网站,让您可以控制网页的可见内容的大小。