为什么我的视口标签在大多数移动设备上不能正确使用设备宽度(无缩放)? [英] Why won't my viewport tag properly use device width (no zoom) on most mobile devices?
问题描述
更新03/2019:该问题解答仍然很活跃，近五年来我的问题浮出水面.请注意，此问题部分是由于那个时候旧的移动设备中更常见的违规行为引起的.对于当今的浏览器和设备，对视口可伸缩性的摆弄将是对一个更大的问题的解决，这可能是CSS或标记中可能存在的问题.
UPDATE 03/2019: This Q&A still gets some activity, nearly 5 years my question came up. Please note this problem was due in part to more common irregularities in older mobile devices at THAT time. With today's browsers and devices, fiddling with viewport scalability would be a shoe-horn fix to a bigger problem which is likely a problem in either your CSS or possibly your markup.
我已经建立了十多个响应站点，但从未遇到过此问题.基本上，我将meta标签用于width = device-width的视口，但iPhone和Android设备仍在缩放.由于某些原因，我在Windows手机上没有这个问题.
I've built a dozen responsive sites and have never experienced this problem. Basically, I'm using the meta tag for viewport with width=device-width, but iPhone and Android devices are still zooming. For some reason, I don't have this problem on Windows phones.
这是html的摘录:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
这是主要包装的HTML(请注意，最外面的div是从jquery.mobile添加的:
Here is the HTML for the main wrappers (note the outermost div is added from jquery.mobile:
<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >
<div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
<div class="container">
</div>
</div>
</body>
这是主要的包装CSS:
And here is the main wrapper CSS:
html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}
body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}
Bootstrap也在样式表之前加载.
Bootstrap is also being loaded prior to the stylesheet.
我已经尝试了许多不同的方法，包括:
I have tried a number of different things already including:
- 删除jquery.mobile
- 删除引导程序
- 将引导程序更新到最新版本
- 将视口标签更改为以下内容:
- width = device-width，initial-scale = 1.0
- width = device-width，initial-scale = 1.0，user-scalable = no
- width = device-width，initial-scale = 1.0，user-scaleable = 0
- width = device-width，初始比例= 1.0，最小比例= 1.0，最大比例= 1.0
- Removing jquery.mobile
- Removing bootstrap
- Updating bootstrap to the latest version
- Changing the viewport tag to the following:
- width=device-width, initial-scale=1.0
- width=device-width, initial-scale=1.0, user-scalable=no
- width=device-width, initial-scale=1.0, user-scalable=0
- width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
我完全没有主意，似乎已经用尽了所有可以通过Google找到/尝试的新内容.非常感谢您能提供的任何帮助！
I am completely out of ideas and seem to have exhausted anything new I can find / try via google. I would greatly appreciate any help you can provide!
推荐答案
经过大量测试并继续搜索之后，我想出了一个似乎非常有效的修复程序.我看到的另一个解决类似问题的方法是:
After much testing and continued searching, I came up with a fix that seems to be very effective. Another solution I saw to a similar problem proposed the following:
<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />起初，这似乎是一个不错的解决方案，因为它适用于大多数手机.不过，这让我有些烦恼，因为它显然不是专门针对使用任何设备宽度的.可以在这里找到答案:
This, at first, seemed like a decent solution as it worked on most phones. It bugged me a little bit though because it obviously isn't geared specifically towards working with any device width. That answer can be found here:
Android视口设置"user-scalable = no"；中断视口的宽度/缩放级别
此解决方案可在大多数移动设备上使用，但在某些情况下效果不佳，导致显示器使用的缩放比例不正确.
This solution worked on most mobile devices, but on some it was ineffective causing the display to be using incorrect zoom.
我相信上述解决方案无效的原因是因为并非所有移动设备都使用底座320进行缩放.因此，当设备宽度不起作用时，这将导致约束不一致.
I believe the reason why the solution above is not effective is because not all mobile devices use a base 320 for zoom. So when device-width isn't working, this causes the constraints to be inconsistent.
我尝试了很多不同的方法，但最终尝试了以下方法(到目前为止)似乎非常有效:
I tried a bunch of different things, but then ultimately tried the following which (so far) seems highly effective:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">我相信此标签的区别在于，它告诉设备使用其原始尺寸，但随后添加了一个比例因子，以告知该设备不会像往常那样放大.
I believe the difference in this tag is that it tells the device to use it's native dimensions, but then adds a scale factor that tells it to not zoom in as much as it would normally.
我从来没有找到解决问题的CSS调整，并且我欢迎将来有其他答案，可能会进一步澄清问题/解决方案.
I never was able to find any CSS adjustments that solved the problem, and I welcome any other answers in the future that may add further clarification to the problem/solution.
我想补充的另一件事是，对于较大的设备(平板电脑，该问题并非针对此设备而设计)，更有效的替代元标记可能是设置最大比例，而不是使用用户可扩展的.像这样:
One other thing I'd like to add, is that an alternative meta tag that may be more effective for larger devices (tablets, which the site in this problem was not designed for), may be to set maximum scale instead of using user-scalable. Like this:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">编辑/更新2018:
尽管这是一个过时的问题，但这个问题仍然获得了很大的成功.事后看来，经过更多的响应式经验后，我可以说，最初的问题和解决方案都是基于因响应式CSS和HTML构造不佳而导致的权宜之计.
This question still gets quite a few hits even though it's a very dated problem. Certainly in hindsight and after much more experience with responsive, I can say that both the initial problem and the solutions were based around stop-gap issues that resulted from poorly constructed responsive CSS and HTML.
尽管这里的答案可能会帮助将来的访客解决在改型较陈旧的代码方面的问题，但我强烈建议任何新开发都应符合最新的响应式标准.如果您的标记和CSS一致，那么您几乎没有理由不希望在响应式视口中使用标准元(如下所示):
While the answers here may help future visitors solve for issues when it comes to retro-fitting more dated code, I would highly recommend that any new development conform to the latest in responsive standards. If your markup and CSS conforms, there are very few reasons why you would ever not want the standard meta for viewport in responsive (below):
<meta name="viewport" content="width=device-width, initial-scale=1">这篇关于为什么我的视口标签在大多数移动设备上不能正确使用设备宽度(无缩放)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
