blocks|key|722982|text|我用了你的答案，但这并不能解决我所有的问题。最初的尺寸保持在ipad的宽度，而不是iphone的宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|722983|另外，当我试图在文本上写字时，屏幕缩放以填充文本框，并且只有当我按下“完成”时，屏幕尺寸才会调整到适当的iphone大小。|722984|我还需要一个合适的解决方案。|722985|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

i used your answer but it doesnt solve all of my problems. 
The initial size remains with ipad's width instead of iphone's.

Also when i try to write on a text the screen zoom itselfs to fill the textbox and only when i press done the screen re-sizes to its proper iphone's size.

I still need a proper solution for this.

blocks|key|723365|text|在iOS+7上，它改变了解释vieport元标记的方式。在这里，您可以找到一个解释ref/doc/uid/TP40013202-CH1-SW75。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|723366|以前，当修改viewport参数时，不会丢弃旧参数。这导致视口参数是加性的。
例如，如果从width=device开始，然后将其更改为初始刻度=1.0，则最终得到计算出的宽度=设备宽度，初始缩放=1.0的视图端口。
在iOS+7中，已经解决了这一问题。现在，您将得到一个初始缩放=1.0的计算视图。
|blockquote|723367|723368|现在的问题是:这将如何影响iOS6<和安卓设备的布局？|723369|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//apple_ref/doc/uid/TP40013202-CH1-SW75^0|15|V|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|C|$]]|$1|G|3|-4|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

On iOS 7 it has been changed the way of interpreting the vieport meta tag.
Here you can find an explanation <a href="https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//apple_ref/doc/uid/TP40013202-CH1-SW75">https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//apple_ref/doc/uid/TP40013202-CH1-SW75</a> .

<blockquote>
 Previously, when the viewport parameters were modified, the old parameters were never discarded.
 This caused the viewport parameters to be additive.
 
 For example, if you started with width=device-width and then changed
 it to initial-scale=1.0, you ended up with a computed viewport of
 width=device-width, initial-scale=1.0.
 
 In iOS 7, this has been addressed. Now you end up with with a computed
 viewport of initial-scale=1.0.
</blockquote>

Thw question now is: how this will affect the layout on iOS6&lt; and on Android devices ?

blocks|key|1879752|text|我的答案是最好的，你可以试一试，应该兼容ios6+5/ios6+6/ios6+7，包括android。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1879753|代码：|1879754|<meta+content="width=device-width;+initial-scale=1.0;+minimum-scale=1.0;+maximum-scale=2.0"+name="viewport"+/>|code-block|syntax|javascript|1879755|iOS7+uiwebview可能希望更改高度：|1879756|1879757|float+version+=+[[[UIDevice+currentDevice]+systemVersion]+floatValue];

self.webView+=+[[UIWebView+alloc]init];
if+(version+>=+7.0)
{
++++self.webView.frame=CGRectMake(0,+0,+rect.size.width,+rect.size.height);
}
else
{
++++self.webView.frame=CGRectMake(0,+0,+rect.size.width,+rect.size.height-20);
}|1879758|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|S|8|@]|9|@]|A|$]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

My answer is the best, you can have a try，Should be compatible with ios5/ios6/ios7 including android

code:

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

iOS7 uiwebview may want to change the height：

code:

<pre><code>float version = [[[UIDevice currentDevice] systemVersion] floatValue];

self.webView = [[UIWebView alloc]init];
if (version &gt;= 7.0)
{
 self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height);
}
else
{
 self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height-20);
}
</code></pre>

blocks|key|1879770|text|我有一个iPhone应用程序，它只会在iOS7+iPad上“崩溃”。从viewport+meta标签中移除“width=device”，修复了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1879771|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|$]]

I had an iPhone app that would only "break" on an iOS7 iPad. Removing "width=device-width" from the viewport meta tag fixed it.

blocks|key|1879799|text|我的phonegap也有同样的问题，而移除设备宽度对我来说解决不了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1879800|我不得不修改类/MainViewController.m|1879801|我修改了：|1879802|-+(void)webViewDidFinishLoad:(UIWebView*)theWebView
{
++++//+Black+base+color+for+background+matches+the+native+apps
++++theWebView.backgroundColor+=+[UIColor+blackColor];

++++return+[super+webViewDidFinishLoad:theWebView];
}|code-block|syntax|javascript|1879803|将是：|1879804|-+(void)webViewDidFinishLoad:(UIWebView*)theWebView+{

++++theWebView.backgroundColor+=+[UIColor+blackColor];

++++float+version+=+[[[UIDevice+currentDevice]+systemVersion]+floatValue];

++++if+(version+>=+7.0)
++++{

++++++++[self.webView+stringByEvaluatingJavaScriptFromString:@"$('meta[name=viewport]').attr('content','width=device-width,+initial-scale=.42+user-scalable=no');$('body').animate({'opacity':1},300)"];
++++}

++++return+[super+webViewDidFinishLoad:theWebView];
}|1879805|*+UPDATE+*|offset|length|style|BOLD|1879806|-+(void)webViewDidFinishLoad:(UIWebView*)theWebView
{
++++//+Black+base+color+for+background+matches+the+native+apps
++++theWebView.backgroundColor+=+[UIColor+blackColor];


++++//+iPhone+app+zoom+on+iPad+with+iOS+7+fix

++++float+version+=+[[[UIDevice+currentDevice]+systemVersion]+floatValue];

++++if+(version+>=+7.0)
++++{

++++++++[self.webView+stringByEvaluatingJavaScriptFromString:@"if(!(navigator.userAgent.match(/iPhone/i))+&&+!(navigator.userAgent.match(/iPod/i)))+{$('meta[name=viewport]').attr('content','width=device-width,+initial-scale=.42+user-scalable=no');}"];
++++}

++++[self.webView+stringByEvaluatingJavaScriptFromString:@"$('body').animate({'opacity':1},300)"];

++++return+[super+webViewDidFinishLoad:theWebView];
}|1879807|我将淡入代码移到if语句之外，否则<+iOS7将保持0的不透明度。|1879808|*结束更新*|1879809|我使用了"version“变量和if语句来针对iOS+7。|1879810|然后缩小了缩放的范围。|1879811|最初，在缩放视图和缩小视图之间发生了跳转，因此我在css中将身体的不透明度设置为0，并在调整大小之后将其设置为动画/褪色。|1879812|entityMap^0|0|0|0|0|0|0|0|A|0|0|0|0|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1D|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1E|8|@$Q|1F|R|1G|S|T]]|9|@]|A|$]]|$1|U|3|V|5|H|7|1H|8|@]|9|@]|A|$I|J]]|$1|W|3|X|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1J|8|@$Q|1K|R|1L|S|T]]|9|@]|A|$]]|$1|10|3|11|5|6|7|1M|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1N|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1O|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|17|$]]

I was having the same problem with a phonegap and removing device-width didn't solve the problem for me.

I had to modify Classes/MainViewController.m

I modified:

<pre><code>- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
 // Black base color for background matches the native apps
 theWebView.backgroundColor = [UIColor blackColor];

 return [super webViewDidFinishLoad:theWebView];
}
</code></pre>

To be:

<pre><code>- (void)webViewDidFinishLoad:(UIWebView*)theWebView {

 theWebView.backgroundColor = [UIColor blackColor];

 float version = [[[UIDevice currentDevice] systemVersion] floatValue];

 if (version &gt;= 7.0)
 {

 [self.webView stringByEvaluatingJavaScriptFromString:@"$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.42 user-scalable=no');$('body').animate({'opacity':1},300)"];
 }

 return [super webViewDidFinishLoad:theWebView];
}
</code></pre>

* UPDATE *

<pre><code>- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
 // Black base color for background matches the native apps
 theWebView.backgroundColor = [UIColor blackColor];


 // iPhone app zoom on iPad with iOS 7 fix

 float version = [[[UIDevice currentDevice] systemVersion] floatValue];

 if (version &gt;= 7.0)
 {

 [self.webView stringByEvaluatingJavaScriptFromString:@"if(!(navigator.userAgent.match(/iPhone/i)) &amp;&amp; !(navigator.userAgent.match(/iPod/i))) {$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.42 user-scalable=no');}"];
 }

 [self.webView stringByEvaluatingJavaScriptFromString:@"$('body').animate({'opacity':1},300)"];

 return [super webViewDidFinishLoad:theWebView];
}
</code></pre>

I moved the fade in code outside of the if statement as &lt; iOS7 would remain at opacity 0 otherwise

* END UPDATE *

I used the "version" variable and if statement to target iOS 7. Thanks @leetvin 

Then reduced the scale from being zoomed in

Initially there was a jump between the zoomed in view and the scaled down view so i set opacity of body to 0 in css and animated/faded in after the resize

We have an app with essentially one UIWebView which is set to "iPhone App" in XCode.

Until now all worked fine, but using the iOS 7 iPad Simulator the App now appears in "Full Screen" immediately, which would not be the problem, but the WebView also appears to be zoomed in.

I only see the upper right 1/4 of the website thats loaded and have to scroll to see the rest.

We use jQuery mobile 1.3.1 in the application.

edit

I found the error. It seems the semantics of the viewport meta-element changed between iOS versions.

Changing

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

to

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

worked for me, but I am unsure if this is the way to go since the <a href="http://view.jquerymobile.com/1.3.2/dist/demos/">jQuery Mobile Demo</a> Page does set the with to the device-with. When I load the Demo-Page from my UIWebView I get the same effect. 

Is there any information on "the right way" to set the viewport, especially since the demo page uses width=device-width

Transition to iOS 7: correct viewport setting for jQuery/iPhone Webapps viewed on iPads

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我们有一个应用程序，本质上只有一个UIWebView，它在XCode中设置为"iPhone应用程序“。到目前为止，一切都很好，但是使用iOS 7 iPad模拟器，应用程序现在立即出现在“全屏”中，这不是问题所在，但WebView似乎也被放大了。我只看到右上1/4的网站，加载和滚动看到其余的。我们在应用程序中使用jQue...

问转到iOS 7: iPads上查看的jQuery/iPhone应用程序的正确视口设置
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转到iOS 7: iPads上查看的jQuery/iPhone应用程序的正确视口设置EN