我怎样才能让移动放大，因为它是在PC ....？ [英] How can I make Zoom in mobile be as it's on PC ....?
问题描述
请参阅我的示例页面：
http://fireman-suppression-84203.bitballoon.com
尝试在PC（台式电脑）上放大此页面，并尝试放大（用手指）在你的智能手机上，你能看到区别吗？当文字变大时，在PC浏览器（例如Chrome）上进行缩放时，它会停留在屏幕的左/右限制上，但是当您试图放大iPhone时，文本会超出左侧&安培;右边框，并且您需要左右读取所有内容。
如何使智能手机上的缩放比例（iPhone 7）保持不变在PC上放大？我希望唯一需要滚动的是上下滚动，我不希望页面内容（文本，图片......）溢出到两边（并且不，我不想禁用缩放选项
以下是代码：
< ;! DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< style>
div {
width：85％;
margin：auto;
border：3px solid＃73AD21;
}
< / style>
< / head>
< body>
< div>只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本。 ..只是一个示例文本...只是一个示例文本...只是一个示例文本...只是一个示例文本...< / div>
< br>
< / body>
< / html>
我也试过这个：
< meta content ='width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = 0'name ='viewport'/>
与此：
< meta name =viewportcontent =width = device-width，initial-scale = 1>
但它没有帮助。
顺便说一句 -
有时我看到'viewport'meta line写成这样：
< meta ...>
有时会这样写：
< meta ... />
这两者有什么区别？这两个选项合法吗？
谢谢！
使用您记下的相同元信息
< meta name =viewportcontent =width = device-width，initial-标度= 1.0\" >
你遇到的问题是我们试图将一个页面长达1200px，小型手机浏览器窗口。使用将视口设置为特定维度的旧方法，例如
< meta name =viewportcontent =width = 320/>
元标记工作正常，但存在局限性，而且由于它不是标准的，所以已经实现了不同方式跨浏览器。
有更好的方法，我已经添加了链接，以便您能够更多地研究问题。基本上你应该使用@viewport CSS样式来解决你的问题。
要回答第二个问题，您添加关于斜杠的元标记的方式取决于正在进行的页面的类型。例如一个XHTML页面，您可能会看到最后一个斜杠，在HTML5页面中，您很可能看不到结束斜线。这一切都归结为由W3C设置的语义代码和Web标准。
希望我能指出你正确的方向。
See my example page here:
http://fireman-suppression-84203.bitballoon.com
Try to zoom-in this page on a PC (a desktop computer) and try to zoom-in (with your fingers) on you smartphone, can you see the difference? When zooming on a PC browser (Chrome for example) when the text become bigger it's stays on the left/right limits of the screen, but when you try to zoom-in on an iPhone for example, then the text exceeds very fast the left & right borders, and you need to go left and right to read it all.
How can I make the zooming on a smartphone (iPhone 7 in my case) be the same as zooming on a PC? I want that the only scrolling needed will be up and down, I don't want that the page content (text, pictures...) will overflow to the sides (and No, I don't want to disable the zooming option on mobiles).
Here is the code:
<!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>
I also tried this:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
and this:
<meta name="viewport" content="width=device-width,initial-scale=1">
But it didn't help.
By the way -
Sometimes I see the 'viewport' meta line written like this:
<meta ...>
and sometimes it's written like that:
<meta .../>
What is the difference between these two? Are the two options legal?
Thanks!
I too use the same meta information you noted
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The issue you are having is that we are trying to squeeze a page up to 1200px at times into a small mobile browser window. Using the old method of setting the viewport to a specific dimensions such as
<meta name="viewport" content="width=320" />
The meta tag worked okay but it has limitations, and since it’s non-standard, it’s been implemented different ways across browsers.
There is a better way and I have added the links for you to be able to research the issue a bit more. Basically you should use @viewport CSS styling to solve your issue.
ELEGANTLY RESIZE YOUR PAGE WITH THE @-VIEWPORT CSS DECLARATION
A tale of two viewports — part two
To answer your second question, the way you add the meta tag regarding the closing slash is dependent on the type of page its going on. For instance a XHTML page you may see the closing slash where as a HTML5 page you will most likely see no closing slash. It all comes down to semantic code and web standards set by w3c.
Hope I was able to point you in the right direction.
这篇关于我怎样才能让移动放大，因为它是在PC ....？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
