web - 手机浏览网站如何自动缩小？

Question

就我而言，我制作了 div width 500px，

但是在手机浏览时会自动缩小

魔术是如何完成的，它是特定于设备的吗？

Answer 1

您可能想在 html 页面的头部尝试这样的事情：

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

有关更多信息，请参见此处： http ://davidbcalhoun.com/2010/viewport-metatag

Answer 2

Edit: the answer below no longer reflects current normal practice. There is now a fairly well established standard called the meta viewport which controls how the page is scaled on mobile. In the absence of this, sites are deemed "not mobile friendly" and mobile browsers show the page at typical desktop width, zoomed out to show full width.

---

It is browser specific.

It's even a configurable option in most mobile browsers (eg Android, Nokia S60, Opera Mini). I prefer to have it turned off, so that pages open with normal 100% zoom (and if it's cut off, I just scroll).

Some people prefer to see the whole page width at once even if the text is too small to read, then double-tap to zoom up after that.

The browser typically calculates the total width of the page first. In this calculation any flexible-width element is taken to be the minimum width which can fit all its children. If this is less or equal to the width of the browser window no scaling is done, but if it's greater, the browser sets this as the virtual page width and, if the user has turned this option on, scales everything down (like zooming out in a modern desktop browser) so that that minimum width of the page occupies the width of the browser window.

Answer 3

浏览器为所欲为。由于手机的屏幕很小，因此该浏览器可能会缩小以使页面看起来更愉快。