在cordova 7上设置视口宽度被忽略

Question

几年前，我开发了一个 cordova/phonegap 应用程序。我需要将屏幕宽度固定为 1200（某些设备的宽度为 962px），所以我添加了一个元标记来设置视口内容宽度，例如

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

最近我不得不添加一些新功能并升级到最新的cordova/phonegap 版本（7.0.1/6.5.0），并且似乎忽略了视口元标记。运行旧版本我可以在 chrome devtools 中看到 html 宽度为 1200 像素，但新版本的 html 宽度保持为 960 像素

知道如何解决这个问题吗？

Answer 1

我终于可以通过编辑 android 平台文件夹中的 MainActivity.java 文件来解决这个问题。 该文件声明了一个继承自 CordovaActivity 并覆盖 onCreate 方法的类。现在似乎需要设置几个设置，以便 webview 使用“viewport”元。

我在 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);
}

关键是将“LoadWithOverviewMode”和“UseWideViewPort”设置为true。

现在应用按预期运行