Apache Cordova（phonegap）html viewport 不起作用问题

iOS解决方法

在Cordova（phonegap）的config.xml中增加一行配置：

实际上这行只是针对 iOS 项目的。

一般是好用的，但是某些版本的 Cordova（phonegap）会出现 bug，Android 设备出现问题。

建议在 Cordova 创建工程的目录下的 config.xml 文件也加上，方便以后用命令编译。

android 解决方法

MainActivity.java 类

package com.easycloud.waiter;

import android.os.Bundle;
import android.webkit.WebView;
import org.apache.cordova.*;

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);

        //下面能让 Android 设备支持 viewport
        WebView webView = (WebView) this.appView.getView();
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);
    }
}

不要忘记引包。

注意：如果使用了 cordova-plugin-crosswalk-webview 插件时，如果出现这个问题，需要在插件内部修复。

/YourProject/platforms/android/src/org/crosswalk/engine/XWalkWebViewEngine.java

找到下面代码：


    private void initWebViewSettings() {
        webView.setVerticalScrollBarEnabled(false);

        //添加这样的代码
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);
        //修改结束

        boolean zOrderOnTop = preferences == null ? false : preferences.getBoolean(XWALK_Z_ORDER_ON_TOP, false);
        webView.setZOrderOnTop(zOrderOnTop);

        // Set xwalk webview settings by Cordova preferences.
        String xwalkUserAgent = preferences == null ? "" : preferences.getString(XWALK_USER_AGENT, "");
        if (!xwalkUserAgent.isEmpty()) {
            webView.setUserAgentString(xwalkUserAgent);
        }
        
        String appendUserAgent = preferences.getString("AppendUserAgent", "");
        if (!appendUserAgent.isEmpty()) {
            webView.setUserAgentString(webView.getUserAgentString() + " " + appendUserAgent);
        }
        
        if (preferences.contains("BackgroundColor")) {
            int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
            webView.setBackgroundColor(backgroundColor);
        }
    }

来源：oschina

链接：https://my.oschina.net/u/1459683/blog/527464

标签

cordova

phonegap

viewport