2017-07-05 10 views
1

数年前、私はコードバ/ phonegapアプリケーションを開発しました。私は1200年に画面の幅を修正するために必要な(一部のデバイスは962pxの幅を持っていた)ので、私はコードバーのビューポート幅の設定は無視されます。

<meta name="viewport" content="width=1200, user-scalable-no"> 

のようなビューポートのコンテンツの幅を設定するためにメタタグを追加しました最近、私はいくつかの新機能を追加する必要がありましたし、最新のものにアップグレードしましたcordova/phonegapのバージョン(7.0.1/6.5.0)であり、ビューポートのメタタグは無視されるようです。古いバージョンを実行しているhtmlの幅は1200pxですが、新しいバージョンのhtmlの幅は960pxのクロムdevtoolsで確認できます

この問題を解決する方法はありますか?

答えて

0

これは私が使ってきたメタタグです。これは、動的にデバイスの実際のデバイス幅にビューポートのデバイス幅を設定することで、仕事を取得します(デバイス幅によって返された):

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 

私はそれもラップすることができますことに気付きましたdiv内のアプリ全体を設定し、そのdivラッパーを100%%100に設定します。

HTML

<div id="MasterDiv"> 
..app code 
</div><!-- End MasterDiv --> 

CSS

#MasterDiv{position:absolute; margin:0; padding:0; top:0; left:0; width:100%; height:100%;} 
1

私は最終的にAndroidプラットフォームフォルダにMainActivity.javaファイルを編集することによってこの問題を解決することができます。 このファイルは、CordovaActivityから継承し、onCreateメソッドをオーバーライドするクラスを宣言します。 webviewが "viewport"メタを利用するためには、今や2つの設定を行う必要があるようです。

MainActivity.javaの私のonCreateメソッドは、今のようになります。

@Override 
public void onCreate(Bundle savedInstanceState) 
{ 
    super.onCreate(savedInstanceState); 

    // enable Cordova apps to be started in the background 
    Bundle extras = getIntent().getExtras(); 
    if (extras != null && extras.getBoolean("cdvStartInBackground", false)) { 
     moveTaskToBack(true); 
    } 

    // Set by <content src="index.html" /> in config.xml 

    if(appView == null) 
       init(); 

    WebView webView = (WebView)appView.getView(); 
    WebSettings settings = webView.getSettings(); 
    settings.setLoadWithOverviewMode(true); 
    settings.setUseWideViewPort(true); 

    loadUrl(launchUrl); 
} 

キーがtrueに設定された "LoadWithOverviewMode" と "UseWideViewPort" を呼び出すことです。 https://github.com/cakuki/cordova-plugin-viewport:

今のアプリはこのプラグインは、コルドバのフックの一部として自動的に提案された修正プログラムを適用するようだ

+0

期待通りに働いています – TomTasche

関連する問題