Html 如何为正确处理旋转的 iPhone 设置视口元？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1230019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set viewport meta for iPhone that handles rotation properly?
提问by George Armhold
So I've been using:
所以我一直在使用：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
to get my HTML content to display nicely on the iPhone. It works great until the user rotates the device into landscape mode, where the display remains constrained to 320px.
让我的 HTML 内容在 iPhone 上很好地显示。在用户将设备旋转到横向模式之前，它的效果很好，在这种模式下，显示仍然被限制在 320 像素。
Is there a simple way to specify a viewport that changes in response to the user changing the device orientation? Or must I resort to Javascript to handle that?
是否有一种简单的方法来指定响应用户更改设备方向而更改的视口？或者我必须求助于 Javascript 来处理它？
回答by Tobias Cohen
Was just trying to work this out myself, and the solution I came up with was:
只是想自己解决这个问题，我想出的解决方案是：
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
This seems to lock the device into 1.0 scale regardless of it's orientation. As a side effect, it does however completely disable user scaling (pinch zooming, etc).
这似乎将设备锁定为 1.0 比例，而不管它的方向如何。然而，作为副作用，它确实完全禁用了用户缩放（捏缩放等）。
回答by Matt Lyons
For anybody still interested:
对于任何仍然感兴趣的人：
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
From the page:
从页面：
<meta name="viewport" content="user-scalable=no,width=device-width" />
This instructs Safari to prevent the user from zooming into the page with the "pinch" gesture and fixes the width of the view port to the width of the screen, which ever orientation the iPhone is in.
这会指示 Safari 阻止用户使用“捏合”手势放大页面，并将视口的宽度固定为屏幕的宽度，无论 iPhone 处于哪个方向。
回答by And Finally
You don't want to lose the user scaling option if you can help it. I like this JS solution from here.
如果可以提供帮助，您不想失去用户缩放选项。我想从这个JS的解决方案在这里。
<script type="text/javascript">
(function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>
回答by Val
I have come up with a slighly different approach that should work on cross platforms
我想出了一个稍微不同的方法，它应该适用于跨平台
http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/
http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/
So far I have tested in on
到目前为止，我已经测试了
Samsun galaxy 2
三星银河 2
- Samsung galaxy s
- Samsung galaxy s2
- Samsung galaxy Note (but had to change the css to 800px [see below]*)
- Motorola
iPhone 4
@media screen and (max-width:800px) {
- 三星 Galaxy S
- 三星银河s2
- 三星 Galaxy Note（但必须将 css 更改为 800px [见下文]*）
- 摩托罗拉
iPhone 4
@media screen and (max-width:800px) {
This is a massive lip forward with mobile development ...
这是移动开发的巨大进步......
回答by Val
You're setting it to not be able to scale (maximum-scale = initial-scale), so it can't scale up when you rotate to landscape mode. Set maximum-scale=1.6 and it will scale properly to fit landscape mode.
您将其设置为无法缩放（最大缩放 = 初始缩放），因此当您旋转到横向模式时它无法缩放。设置maximum-scale=1.6，它将正确缩放以适应横向模式。
回答by BadPirate
I had this issue myself, and I wanted to both be able to set the width, and have it update on rotate and allow the user to scale and zoom the page (the current answer provides the first but prevents the later as a side-effect).. so I came up with a fix that keeps the view width correct for the orientation, but still allows for zooming, though it is not super straight forward.
我自己也遇到了这个问题，我希望既能够设置宽度，又能在旋转时更新它并允许用户缩放和缩放页面（当前的答案提供了第一个，但防止后者作为副作用).. 所以我想出了一个修复方法，使视图宽度保持正确的方向，但仍然允许缩放，尽管它不是超级直接。
First, add the following Javascript to the webpage you are displaying:
首先，将以下 Javascript 添加到您正在显示的网页中：
<script type='text/javascript'>
function setViewPortWidth(width) {
var metatags = document.getElementsByTagName('meta');
for(cnt = 0; cnt < metatags.length; cnt++) {
var element = metatags[cnt];
if(element.getAttribute('name') == 'viewport') {
element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
document.body.style['max-width'] = width+'px';
}
}
}
</script>
Then in your - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation method, add:
然后在您的 - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation 方法中，添加：
float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;
stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];
if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)
// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];
Additional Tweaking can be done by modifying more of the viewportal content settings:
可以通过修改更多视口内容设置来完成其他调整：
Also, I understand you can put a JS listener for onresize or something like to trigger the rescaling, but this worked for me as I'm doing it from Cocoa Touch UI frameworks.
另外，我知道您可以为 onresize 或类似触发重新缩放的内容放置一个 JS 侦听器，但这对我有用，因为我是从 Cocoa Touch UI 框架中执行此操作的。
Hope this helps someone :)
希望这对某人有所帮助:)
回答by Piseth Sok
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
suport all iphones, all ipads, all androids.
支持所有 iphone，所有 ipad，所有 android。
回答by ScottC
Why not just reload the page when the user rotates the screen with javascript
当用户使用 javascript 旋转屏幕时，为什么不重新加载页面
function doOnOrientationChange()
{
location.reload();
}
window.addEventListener('orientationchange', doOnOrientationChange);
回答by mads
just want to share, i've played around with the viewport settings for my responsive design, if i set the Max scale to 0.8, the initial scale to 1 and scalable to no then i get the smallest view in portrait mode and the iPad view for landscape :D... this is properly an ugly hack but it seems to work, i don't know why so i won't be using it, but interesting results
只是想分享一下，我已经尝试了响应式设计的视口设置，如果我将最大比例设置为 0.8，初始比例设置为 1 并且可扩展为 no，那么我会在纵向模式和 iPad 视图中获得最小视图对于景观：D ...这确实是一个丑陋的黑客，但它似乎有效，我不知道为什么所以我不会使用它，但有趣的结果
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />
enjoy :)
请享用 ：）
