如何在移动设备中实现像在PC上一样的缩放功能...？
请看我的示例页面：
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 .../>这两者之间的区别是什么？这两个选项合法吗？
谢谢!
回答 1
Stack Overflow用户
发布于 2017-08-25 09:04:30
我也使用您注意到的相同元信息
<meta name="viewport" content="width=device-width, initial-scale=1.0">你遇到的问题是，我们试图在一个很小的移动浏览器窗口中塞进一个高达1200px的页面。使用将视口设置为特定尺寸的旧方法，例如
<meta name="viewport" content="width=320" />meta标签运行良好，但有其局限性，而且由于它是非标准的，所以在不同的浏览器中实现的方式也不同。
有一个更好的方法，我已经添加了链接，以便您能够更多地研究这个问题。基本上你应该使用@viewport CSS样式来解决你的问题。
ELEGANTLY RESIZE YOUR PAGE WITH THE @-VIEWPORT CSS DECLARATION
A tale of two viewports — part two
为了回答你的第二个问题，你添加关于结束斜杠的meta标签的方式取决于它所在的页面类型。例如，对于XHTML页面，您可能会看到结束斜杠，而对于HTML5页面，您很可能不会看到结束斜杠。这一切都归结于w3c设定的语义代码和web标准。
希望我能给你指出正确的方向。
https://stackoverflow.com/questions/45871416
复制相似问题
腾讯云开发者
