CSS 视口元标记真的有必要吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14775195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is the viewport meta tag really necessary?
提问by Jeffpowrs
I've created a few responsive sites but am rather new to responsive site development. In my CSS 99% of my values are in ems or percentages. I am using media queries (both max-width and max-device-width) to make layout changes. I have not included a viewport meta tag and it works perfectly on iOS, a number of Android phones and tablets that I tested on, and all desktop browsers.
我创建了一些响应式网站，但我对响应式网站开发还很陌生。在我的 CSS 中，99% 的值都以 em 或百分比表示。我正在使用媒体查询（最大宽度和最大设备宽度）来更改布局。我没有包含视口元标记，它在 iOS、我测试过的许多 Android 手机和平板电脑以及所有桌面浏览器上都可以完美运行。
Adding a meta tag breaks my site. Am I doing something wrong, or doing something right so that I don't need to include it? I'm confused as to why it seems to be a best practice, as it's breaking my stuff.
添加元标记会破坏我的网站。我是做错了什么，还是做对了所以不需要包含它？我很困惑为什么它似乎是最佳实践，因为它破坏了我的东西。
Am I missing something?
我错过了什么吗？
回答by Paul D. Waite
On desktop operating systems, browser viewports are a fixed number of pixels wide, and web page content is rendered into them as-is.
在桌面操作系统上，浏览器视口的宽度是固定的，网页内容按原样呈现在其中。
Starting with Safari on iOS (or whatever we were supposed to be calling iOS back then), mobile browser viewports have been "virtual". Although the viewport may only take up (for example) 320 physical pixels-worth of space in the interface, the browser creates a "virtual" viewport that's larger (980 pixels wide by default on iOS, I think) and renders content in there, then zooms that virtual viewport out until it fits into the actual physical pixels available on the device's screen.
从 iOS 上的 Safari（或当时我们应该称其为 iOS 的任何东西）开始，移动浏览器视口一直是“虚拟的”。尽管视口可能只占用（例如）界面中 320 个物理像素的空间，但浏览器会创建一个更大的“虚拟”视口（我认为在 iOS 上默认为 980 像素宽）并在其中呈现内容，然后缩小该虚拟视口，直到它适合设备屏幕上可用的实际物理像素。
The viewport meta tag allows you to tell the mobile browser what size this virtual viewport should be. This is often useful if you're not actually changing your site's design for mobile, and it renders better with a larger or smaller virtual viewport. (I believe 980 pixels was chosen as the default because it did a good job of rendering lots of high-profile sites in 2007; for any given site, a different value might be better.)
视口元标记允许你告诉移动浏览器这个虚拟视口应该是什么大小。如果您实际上并未针对移动设备更改站点的设计，这通常很有用，并且使用更大或更小的虚拟视口可以更好地呈现。（我相信 980 像素被选为默认值，因为它在 2007 年渲染了许多知名网站的效果很好；对于任何给定的网站，不同的值可能会更好。）
Personally, I always use <meta name="viewport" content="width=device-width, initial-scale=1">so that the virtual viewport matches the device dimensions. (Note that initial-scale=1seems to be necessary to make the virtual viewport adapt to landscape mode on iOS.) That makes mobile browsers behave like desktop browsers always have, which is what I'm used to.
就个人而言，我总是使用<meta name="viewport" content="width=device-width, initial-scale=1">虚拟视口来匹配设备尺寸。（请注意，这initial-scale=1似乎是使虚拟视口适应 iOS 上的横向模式所必需的。）这使得移动浏览器的行为与桌面浏览器始终具有的一样，这是我习惯的。
Without a viewport meta tag, your site will be rendered into the device's default virtual viewport. I don't think that's necessarilya problem, especially if all your units are ems or percentages as you say. But it might be a bit confusing if you need to think in pixels at any point, especially as different browsers could have differently-sized default virtual viewports. It also might be confusing for subsequent maintainers if they don't understand the approach.
如果没有视口元标记，您的站点将被渲染到设备的默认虚拟视口中。我认为这不一定是一个问题，尤其是如果你所有的单位都是你所说的 em 或百分比。但是，如果您需要在任何时候以像素为单位考虑，这可能会有点令人困惑，尤其是因为不同的浏览器可能具有不同大小的默认虚拟视口。如果后续维护者不理解该方法，他们也可能会感到困惑。
I imagine you set your base font size quite large, so that it's legible? Could you link to one of the websites you've created like this, so we can see an example?
我想您将基本字体大小设置得非常大，以便清晰易读？您能否链接到您这样创建的网站之一，以便我们查看示例？
回答by JamieM23
Without viewport your device uses a virtual viewport which by default is effectively a zoomed out version of your website, this is around 980 px on iPhone and 800px on andriod. As soon as you set the viewport and disable this zooming out, the device treats the website as it should and measures out at around 480px wide or 320px depending on device and orientation etc.
如果没有视口，您的设备会使用虚拟视口，默认情况下它实际上是您网站的缩小版本，在 iPhone 上约为 980 像素，在安卓上约为 800 像素。一旦您设置视口并禁用此缩小，设备就会按照应有的方式处理网站，并根据设备和方向等以大约 480 像素或 320 像素的宽度进行测量。
Full resource here below, my advice is that whenever your working with responsive & mobile, always set the viewport first. It is the best way to normalise device zoom and ensure your site is shown using an actual device width as opposed to any virtual widths.
下面是完整的资源，我的建议是，每当您使用响应式和移动设备时，请始终首先设置视口。这是标准化设备缩放并确保您的网站使用实际设备宽度而不是任何虚拟宽度显示的最佳方式。
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
回答by Jeffpowrs
So to answer my own question. It is not necessary.
所以来回答我自己的问题。这不是必要的。
You can use min and max width media queries to style the desktop version at specific breakpoints.
您可以使用最小和最大宽度媒体查询在特定断点处设置桌面版本的样式。
You then update primarily font-size and other properties specifically for tablets and phones. Like I said this is primarily increasing font-size for readability.
然后，您主要更新字体大小和其他专门针对平板电脑和手机的属性。就像我说的，这主要是为了提高可读性而增加字体大小。
This method though has a major maintainability issue.
这种方法虽然有一个主要的可维护性问题。
The viewport meta tag allows you to simply use max and min-width that span from desktop to mobile devices.
视口元标记允许您简单地使用从桌面到移动设备的最大和最小宽度。
回答by JoostS
You should definitely use viewport tags, as they have the ability to make a web developers life infinitely simpler. They allow you to easily control the exact render dimensions and/or zoom levels of ANY screen (even on desktopif you want). That makes building a website for any device a piece of cake. But know that with great power comes great responsibility. Use this power wisely (and do not DISABLE zooming).
您绝对应该使用视口标签，因为它们能够使 Web 开发人员的生活变得无限简单。它们允许您轻松控制任何屏幕的精确渲染尺寸和/或缩放级别（如果需要，甚至可以在桌面上）。这使得为任何设备构建网站变得轻而易举。但要知道，能力越大，责任越大。明智地使用此功能（不要禁用缩放）。
回答by Shantanu
Not for all devices, but yes for Mobiles. Mobile browsers render pages in a virtual "window", the viewport which is usually wider than the screen so they don't need to squeeze every page layout into a tiny window (hence it breaks some non-mobile-optimized sites & users have to zoom). Mobile Safariintroduced the "viewport meta tag" to let web developers control the viewport's size and scale. Now all mobile browsers support this tag even though it is not part of any web standard. A typical mobile-optimized site should contain the following tag:
并非适用于所有设备，但适用于手机。移动浏览器在虚拟“窗口”中呈现页面，视口通常比屏幕宽，因此他们不需要将每个页面布局都挤进一个小窗口中（因此它破坏了一些非移动优化的网站，用户必须飞涨）。Mobile Safari引入了“视口元标记”，让 Web 开发人员控制视口的大小和比例。现在所有的移动浏览器都支持这个标签，即使它不是任何网络标准的一部分。典型的移动优化网站应包含以下标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. Width of the screen in CSS pixels at a scale of 100%,The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
width 属性控制视口的大小。以 CSS 像素为单位的屏幕宽度，缩放比例为 100%，initial-scale 属性控制页面首次加载时的缩放级别。最大比例、最小比例和用户可缩放属性控制允许用户放大或缩小页面的方式。
回答by Alexandre Magno Teles Zimerer
You can still use the viewport metatag to optimize the resolution to the device view and able the user to Zooming:
您仍然可以使用视口元标记来优化设备视图的分辨率并使用户能够缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">
With a maximum-scale defined you can have control how the user Zoom it. I thing we should have this option enable because even with a responsive website I wish to Zoom, it learn that already, it's so intuitive that becomes expectation.
定义最大比例后，您可以控制用户如何缩放它。我认为我们应该启用此选项，因为即使使用我希望缩放的响应式网站，它也已经知道，它是如此直观，以至于成为期望。
回答by aditya
Yes it is a necessary tag for developing responsive sites.However using the tag alone won't help you to do so,but they definitely do make it easier to develop responsive sites by allowing you to control the size of the visible content of your webpage.
是的，它是开发响应式网站的必要标签。但是，单独使用该标签并不能帮助您做到这一点，但它们确实可以让您控制网页可见内容的大小，从而更轻松地开发响应式网站.
回答by Lucian Davidescu
For whomever is in doubt, the easiest way is to test without it. I did so and came to a swift resolution - if I had to keep just one meta tag, this would be it (above 'description' and whatever). Actually if I had to choose between just this one and all others, I'd give and all away. Just test it!
对于有疑问的人，最简单的方法是在没有它的情况下进行测试。我这样做并迅速解决了问题——如果我必须只保留一个元标签，那就是它（在“描述”之上等等）。事实上，如果我不得不在这一个和所有其他之间做出选择，我会放弃。只是测试一下！
