安卓4.1视口缩放(setInitialScale，元素initial-scale无效)

Question

在SO和互联网上有数百篇关于如何修复Android中视口缩放的帖子，我现在相当确定在Android 4.1上无法在Webview中设置初始比例。我正在构建一个Cordova（Phonegap）应用程序，在iPhone 3GS、4S和5以及运行iOS7的iPad 2和iOS6的3GS上，我已经很好地缩放了所有东西。我还将UI缩放到适合Moto G、LG Nexus 5、Google Nexus 5和Samsung Galaxy S4上，它们都运行Android 4.4。但是，在运行Android 4.1的Samsung Galaxy S2和S3 Mini上，我无法设置初始比例。HTML视口元标记在4.1或4.4上不起作用（在Chrome上可以，在WebView或默认浏览器中不行）。

<meta name="viewport" content="user-scalable=no, initial-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />

我用命令行创建了一个非常基础的Cordova项目，cordova create basicProject。如果我在主Activity的onCreate方法中添加一些Java代码，特别是setInitialScale方法：

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.init();
    // Set by <content src="index.html" /> in config.xml
    super.loadUrl(Config.getStartUrl());
    //super.loadUrl("file:///android_asset/www/index.html");

    this.appView.setInitialScale( 50  );

}

然后我在4.4版本的Moto G上按预期进行缩放： 但是在Galaxy S2上运行完全相同的项目，却没有被缩放。 由于我的测试仅限于三星设备上的4.1版本或者在4.4版本上的一系列设备，所以如果有人能够在4.2或4.3上测试同样的内容，或是在4.1上的非三星设备，那将非常有帮助。

请问是否有人知道如何让Android 4.1遵守setInitialScale()的规定？

- Pete

Answer 1

您应该能够向您的网页添加一些JavaScript代码，当被Webview获取时，它将缩放内容。以下是一个示例，可以缩放您的HTML内容，使其适合屏幕可用宽度：

function customScaleThisScreen() 
    var contentWidth = document.body.scrollWidth, 
        windowWidth = window.innerWidth, 
        newScale = windowWidth / contentWidth;
    document.body.style.zoom = newScale;
}

这将适用于旧版（4.2 之前）和新版基于 Chromium 的 Webview（4.2+）。

- petey

---

实际上，我在视图中有一个滑块，它使内容比我想要的缩放更宽 - 但是通过快速修改使用设备像素比和一些设备检测代码，可以解决这个问题，document.body.style.zoom = 1 / window.devicePixelRatio。 - Pete

Answer 2

@Petey向我展示了解决方案，但为了完整起见，这是我的版本，带有更多的PhoneGap上下文：

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {

        // PETEY'S SOLUTION, WRAPPED IN CODE TO CHECK FOR ANDROID PRE 4.2
        // ALSO MODIFIED TO USE DEVICE PIXEL RATIO, INSTEAD OF CONTENTWIDTH
        if( isAndroid() ) {
            var matches = device.version.match( /[0-9]+(\.[0-9]+)?/i );

            if( matches.length && parseFloat( matches[ 0 ] ) < 4.2 ) {
                document.body.style.zoom = 1 / window.devicePixelRatio;
            }
        }

        // start app logic

    }
};

app.initialize();

function isAndroid() {
    if( device.platform.match( /android/i ) ) {    
        return true;
    }

    return false;
}

- Pete