[iOS7]iPhoneアプリをiPadで見た場合のWebViewのdevice-widthが変更されて画面表示が崩れる場合の対処法

なかなか気づきづらいのですが、iOS7になってからiPhoneアプリをiPadで開きWebViewを配置している画面を見ると画面が崩れてしまいます。というより画面表示領域が横幅320px以上になってしまい、iPhone表示される場合と違う画面表示になってしまいます。この対処方法について紹介します。

iOS7になって非Retina iPadのiPhoneアプリ表示仕様が変更

今まではiPadでiPhoneアプリを表示されるとiPhoneと同じ画面サイズ（320x480）でiPadの中心に表示される仕様でしたが、iOS7になってからは640x960サイズで表示できるようになり、x2の拡大表示が廃止されました。

その影響で非Retina iPadでのiPhoneアプリのwebViewのdevice-widthは320pxでなく、640pxに変更してしまったようです。

解決方法

解決方法は大きく２とおりあると思います。

【解決方法1】Webサーバ側のHTMLファイルのviewportのmetaタグからdevice-widthを削除もしくは320固定にする

device-width指定をやめて320固定にする。

<pre class="prettyprint"><meta name="viewport" content="width=320,initial-scale=1.0…"></pre>

または、device-width指定を消す。

<pre class="prettyprint"><meta name="viewport" content="initial-scale=1.0…"></pre>

※しかしこれだとAndroidなど他のデバイスにも影響が出てきてしまうのであまりお勧めしません。（対象のWebView画面がiOSのみを想定しているならいいかも。）

【解決方法2】アプリ側で非Retina Padでアクセスされた場合にJavascriptでdevice-widthを動的に指定

アプリ側で非Retina iPadからアクセスされた場合にwebViewのロード完了時のメソッド（webViewDidFinishLoad）に対して動的にJavascriptを発行してdevice-widthを変更することでも解決できます。

//webロードが正常に完了
- (void)webViewDidFinishLoad:(UIWebView *)view {
    NSString *command =[NSString stringWithFormat:@"var meta = document.createElement('meta');var iniScale = screen.width / 320;meta.setAttribute('name', 'viewport');meta.setAttribute('content','width=320, initial-scale=' + iniScale + ', minimum-scale=0.5, maximum-scale=3.0, user-scalable=1');document.getElementsByTagName('head')[0].appendChild(meta);"];
    [webView stringByEvaluatingJavaScriptFromString:command];
}

しかしこれもWebViewがロード完了したときに呼ばれるので、最初一瞬は大きなサイズで表示されてしまいますね。

多分これはバグなのでアップデートで改善される事を願う

でもこれは明らかにiOSのバグな気もするので、次回以降のiOSアップデートで改善される可能性は高いですね。それまでは上記の解決策でしのぐというスタンスでいいと思います。

リジェクト要因にもなるので対処しておきましょう

でもiPhoneアプリでもiPadで必要な機能がこの仕様で使えないという事であればリジェクトされる可能性がありますのでこの対処はやっておいたほうがいいと思います。

参考にさせて頂いたページ

http://nor.blog.jp/archives/67958717.html