Apache Cordova（phonegap）html viewport 不起做用問題

iOS解決方法

 

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

<preference name="EnableViewportScale" value="true"/> 

實際上這行只是針對 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);
        }
    }