如何让移动设备上的缩放像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">

但它并没有帮助。

顺便说一句 -

有时候，我看到这样写的 '视' 元行：

<meta ...>

，有时它是这样写的是：

<meta .../>

的区别是什么这两个之间？这两个选项合法吗？

谢谢！

来源

2017-08-24 Tomas

喜@Tomas，你尝试过“用户可升级”设置为yes或1这里是链接[链接] https://css-tricks.com/snippets/html/responsive-meta-tag/ [/链接] – bdalina

我也使用相同的元信息你注意到

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

您遇到的问题是，我们正在努力有时挤一个页面高达1200像素成一个小型的移动浏览器窗口。使用视口设置为特定尺寸的老方法，如

<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标准。

希望我能够为你指明正确的方向。

来源

2017-08-25 01:04:29 DigitalDesigner

因此，对于一个简单的HTML + CSS页面像我用，我应该还是应该我不是一个结束斜杠添加到我的视口代码？并感谢您的链接，这有点沉重，很多需要阅读，但我会检查它。 – Tomas

如何让移动设备上的缩放像PC上一样？

回答

相关问题