Question

请参阅我的示例页面：

http://fireman-suppression-84203.bitballoon.com

尝试在PC（台式电脑）上放大此页面，并尝试用智能手机放大（用手指），你能看到区别吗？当文本变大时，在PC浏览器（例如Chrome）上放大时，它会保持在屏幕的左/右界限，但是当您尝试放大iPhone时，则文本超出左侧非常快＆安培;右边界，你需要左右移动才能阅读。

如何在智能手机上进行缩放（在我的情况下为iPhone 7）与在PC上进行缩放相同？我希望所需的唯一滚动是上下，我不希望页面内容（文本，图片......）溢出到两侧（不，我不想禁用缩放选项）手机）。

以下是代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

div {
    width:85%;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div>Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... </div>
<br>

</body>
</html>

我也试过这个：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>

和此：

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

但它没有帮助。

顺便说一下 -

有时候我会看到'viewport'元线如下所示：

<meta ...>

有时写得像：

<meta .../>

这两者有什么区别？这两个选项合法吗？

谢谢！

Answer 1

我也使用您提到的相同元信息

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

您遇到的问题是我们试图将一个高达1200px的页面挤进一个小型移动浏览器窗口。使用将视口设置为特定维度（例如

）的旧方法

 <meta name="viewport" content="width=320" />

元标记工作正常，但它有局限性，因为它是非标准的，所以它在浏览器中实现了不同的方式。

有更好的方法，我已添加链接，以便您能够更多地研究该问题。基本上你应该使用@viewport CSS样式来解决你的问题。

ELEGANTLY RESIZE YOUR PAGE WITH THE @-VIEWPORT CSS DECLARATION

A tale of two viewports — part two

要回答第二个问题，添加关于斜线的元标记的方式取决于它所进行的页面类型。例如，在XHTML页面中，您可能会看到结束斜杠，在HTML5页面中，您很可能看不到结束斜杠。这一切都归结为w3c设置的语义代码和Web标准。

希望我能指出你正确的方向。

如何在移动设备上制作放大缩小功能......？

1 个答案: