视口元标记真的有必要吗？ [英] Is the viewport meta tag really necessary?
问题描述
我创建了一些响应性网站，但对响应式网站开发却很新。在我的CSS 99％的值是ems或百分比。我使用媒体查询（max-width和max-device-width）来更改布局。我没有包含视口元标记，它在iOS，我测试过的一些Android手机和平板电脑，以及所有的桌面浏览器上完美。
添加元标记会破坏我的网站。我做错了什么，或做正确的事情，使我不需要包括它？
我错过了一些东西？
我不知道为什么这是最好的做法，因为它打破了我的东西。在桌面操作系统上，浏览器视口的像素宽度是固定的，网页内容是按原样渲染的。从iOS上的Safari开始（或者我们应该在那时调用iOS），移动浏览器的视口已经是虚拟的。尽管视口可能只占用界面中320个物理像素空间，但是浏览器创建了一个更大的虚拟视口（默认情况下为iOS的980像素，我认为），并在那里呈现内容，然后缩放虚拟视口，直到它适合设备屏幕上可用的实际物理像素。
视口元标记允许您告诉移动浏览器这个虚拟视口应该。如果您实际上没有更改移动设备的网站设计，并且通过更大或更小的虚拟视口呈现更好的效果，这通常很有用。 （我相信选择了980像素作为默认值，因为它在2007年提供了许多高调的网站;对于任何给定的网站，不同的值可能更好。）
就我个人而言，我总是使用< meta name =viewportcontent =width = device-width，initial-scale = 1> 虚拟视口匹配设备尺寸。 （请注意， initial-scale = 1 似乎有必要使虚拟视口适应iOS上的横向模式。）这使得移动浏览器的行为像桌面浏览器一样，这是我习惯。
没有视口元标记，您的网站将被渲染到设备的默认虚拟视口。我不认为这是一个问题，特别是如果你的所有单位是ems或百分比，你说。但是，如果你需要在任何点想像素，可能会有点混乱，特别是因为不同的浏览器可能有不同大小的默认虚拟视口。
我想你设置的基本字体大小相当大，以便它清晰易读？您能否链接到您创建的某个网站，我们可以看到一个示例？
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.
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?
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.
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.)
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=1 seems 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.
Without a viewport meta tag, your site will be rendered into the device's default virtual viewport. I don't think that's necessarily a 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.
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?
这篇关于视口元标记真的有必要吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
