web-dev-qa-db-ja.com

iOS 7への移行：iPadで表示されるjQuery / iPhone Webappsの正しいビューポート設定

XCodeで「iPhone App」に設定されている本質的に1つのUIWebViewを持つアプリがあります。

これまではすべて正常に機能していましたが、iOS 7 iPadシミュレーターを使用すると、アプリはすぐに「フルスクリーン」で表示されます。これは問題ではありませんが、WebViewも拡大表示されます。

読み込まれたウェブサイトの右上1/4のみが表示され、残りを表示するにはスクロールする必要があります。

アプリケーションではjQuery mobile 1.3.1を使用します。

edit

エラーが見つかりました。 iOSバージョン間でビューポートメタ要素のセマンティクスが変更されたようです。

変化

<meta name="viewport" content="width=device-width, initial-scale=1">

に

<meta name="viewport" content="initial-scale=1">

私にとってはうまくいきましたが、 jQuery Mobile Demo ページがwithをdevice-withに設定しているので、これが正しい方法かどうかわかりません。 UIWebViewからDemo-Pageをロードすると、同じ効果が得られます。

特にデモページではwidth = device-widthを使用しているため、ビューポートを設定する「正しい方法」に関する情報はありますか

iosipadjquery-mobileuiwebviewios7
25
msung

IOS 7では、vieportメタタグの解釈方法が変更されました。ここに説明があります https://developer.Apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//Apple_ref/doc/uid/TP40013202-CH1-SW75 =。

以前は、ビューポートパラメータが変更されたときに、古いパラメータが破棄されることはありませんでした。これにより、ビューポートパラメータが追加されました。

たとえば、width = device-widthで開始し、それをinitial-scale = 1.0に変更した場合、width = device-width、initial-scale = 1.0の計算されたビューポートになります。

IOS 7では、この問題が解決されています。これで、initial-scale = 1.0の計算ビューポートが作成されました。

今の質問は次のとおりです：これがiOS6 <およびAndroidデバイスのレイアウトにどのように影響するか？

12
MrPatol

IOS7 iPadでしか「壊れない」iPhoneアプリがありました。ビューポートメタタグから「width = device-width」を削除すると修正されました。

4
theflyingcar

私はあなたの答えを使いましたが、それは私の問題のすべてを解決するわけではありません。初期サイズはiphoneではなくipadの幅のままです。

また、テキストを書き込もうとすると、画面自体がテキストボックスいっぱいにズームし、押すと画面が適切なiphoneのサイズにサイズ変更されます。

これにはまだ適切な解決策が必要です。

1
user2812399

私の答えは最高です、あなたは試すことができます、Androidを含むios5/ios6/ios7と互換性があるべきです

コード：

<meta content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0" name="viewport" />

iOS7 uiwebviewは高さを変更したい場合があります：

コード：

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);
}
1
leetvin

私は電話ギャップで同じ問題を抱えていましたが、デバイス幅を削除しても問題は解決しませんでした。

Classes/MainViewController.mを変更する必要がありました

私は変更しました：

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

    return [super webViewDidFinishLoad:theWebView];
}

することが：

- (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];
}

*更新*

- (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];
}

<iOS7は不透明度0のままになるので、ifステートメントの外にフェードインコードを移動しました。

* END UPDATE *

「バージョン」変数とifステートメントを使用してiOS 7をターゲットにしました。ありがとう@leetvin

次に、拡大されないようにスケールを縮小しました

最初は拡大表示と縮小表示の間にジャンプがあったので、CSSでボディの不透明度を0に設定し、サイズ変更後にアニメーション/フェードインしました

1
Gareth