blocks|key|1271419|text|我自己也在试着解决这个问题，我想出的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1271420|<meta+name="viewport"+content="initial-scale+=+1.0,maximum-scale+=+1.0"+/>|code-block|syntax|javascript|1271421|这似乎将设备锁定在1.0刻度，而不管它的方向。然而，作为一个副作用，它确实完全禁用了用户缩放(收缩缩放等)。|1271422|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Was just trying to work this out myself, and the solution I came up with was:

<pre><code>&lt;meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /&gt;
</code></pre>

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).

blocks|key|1486152|text|如果可以的话，你不会想失去用户缩放选项的。我喜欢这个来自here的JS解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1486153|<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='+%2B+scales[0]+%2B+',maximum-scale='+%2B+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>|code-block|syntax|javascript|1486154|entityMap|0|LINK|mutability|MUTABLE|url|http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug^0|S|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You don't want to lose the user scaling option if you can help it. I like this JS solution from <a href="http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug" rel="noreferrer">here</a>.

<pre><code>&lt;script type="text/javascript"&gt;
(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]) &amp;&amp; addEvent in doc) {
 fix();
 scales = [.25, 1.6];
 doc[addEvent](type, fix, true);
 }

}(document));
&lt;/script&gt;
</code></pre>

blocks|key|1485934|text|您将其设置为不能缩放(maximum-scale+=+initial-+scale+)，因此当您旋转到横向模式时，它不能缩放。设置maximum-+scale+=1.6，它将适当缩放以适应横向模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1485935|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1486085|text|我自己也有这个问题，我希望既能设置宽度，又能让它在旋转时更新，并允许用户缩放页面(当前的答案提供了第一种方法，但防止了后者作为副作用)。因此，我想出了一个修复方法，使视图宽度保持正确的方向，但仍然允许缩放，尽管它不是超级直线向前。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486086|首先，将以下Javascript添加到要显示的网页中：|1486087|+<script+type='text/javascript'>
+function+setViewPortWidth(width)+{
++var+metatags+=+document.getElementsByTagName('meta');
++for(cnt+=+0;+cnt+<+metatags.length;+cnt%2B%2B)+{+
+++var+element+=+metatags[cnt];
+++if(element.getAttribute('name')+==+'viewport')+{

++++element.setAttribute('content','width+=+'%2Bwidth%2B';+maximum-scale+=+5;+user-scalable+=+yes');
++++document.body.style['max-width']+=+width%2B'px';
+++}
++}
+}
+</script>|code-block|syntax|javascript|1486088|然后在-+(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation方法中添加：|1486089|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(%25f);",availableWidth];
[_webView+stringByEvaluatingJavaScriptFromString:stringJS];|1486090|其他调整可以通过修改更多的视图门户内容设置来完成：|1486091|http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm|offset|length|1486092|此外，我知道您可以为onresize或类似的东西放置一个JS侦听器来触发重新缩放，但这对我来说很有效，因为我是在Cocoa+Touch+UI框架中这样做的。|1486093|希望这对某些人有帮助:)|1486094|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|4K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$Q|1A|R|1B|1|1C]]|A|$]]|$1|S|3|T|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1E|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|P]]]]

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:

<pre><code> &lt;script type='text/javascript'&gt;
 function setViewPortWidth(width) {
 var metatags = document.getElementsByTagName('meta');
 for(cnt = 0; cnt &lt; 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';
 }
 }
 }
 &lt;/script&gt;
</code></pre>

Then in your - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation method, add:

<pre><code>float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth &gt; 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];
</code></pre>

Additional Tweaking can be done by modifying more of the viewportal content settings:

<a href="http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm" rel="nofollow">http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm</a>

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.

Hope this helps someone :)

blocks|key|1486245|text|<meta+name="viewport"+content="width=device-width,+minimum-scale=1,+maximum-scale=1">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1486246|支持所有iphones，所有ipads，所有android。|unstyled|1486247|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"&gt;
</code></pre>

suport all iphones, all ipads, all androids.

blocks|key|1486203|text|我只想分享一下，我已经在我的响应式设计中使用了视口设置，如果我将最大比例设置为0.8，初始比例设置为1，并可缩放为no，那么我将在纵向模式下获得最小视图，并在横向模式下获得iPad视图:D...这是一个丑陋的技巧，但它似乎起作用了，我不知道为什么，所以我不会使用它，但有趣的结果|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486204|<meta+name="viewport"+content="user-scalable=no,+initial-scale+=+1.0,maximum-scale+=+0.8,width=device-width"+/>|code-block|syntax|javascript|1486205|享受:)|1486206|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>&lt;meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" /&gt;
</code></pre>

enjoy :)

blocks|key|1486292|text|当用户使用javascript旋转屏幕时，为什么不直接重新加载页面|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486293|function+doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange',+doOnOrientationChange);|code-block|syntax|javascript|1486294|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why not just reload the page when the user rotates the screen with javascript

<pre><code>function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);
</code></pre>

So I've been using:

<pre><code>&lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/&gt;
</code></pre>

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.

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?

How to set viewport meta for iPhone that handles rotation properly?

响应式设计

所以我一直在使用：<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>让我的内容在iPhone上很好地显示。它工作得很好，直到用户将设备旋转到横向模式，在这种模式下，显示器仍被限制为320px。有没有一种简单的方法来指定随着用户更改设备方向而更改的视口？或者我必须求助于

问如何为iPhone设置正确处理旋转的视口元？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为iPhone设置正确处理旋转的视口元？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何为iPhone设置正确处理旋转的视口元？
EN