Android 4.1 масштабирование области просмотра ( setInitialScale, начальный масштаб мета не работает)

Question

В SO и остальной части Интернета есть сотни сообщений о попытках исправить масштабирование области просмотра в Android, и теперь я совершенно уверен, что вы просто не можете установить начальный масштаб в веб-просмотре на Android 4.1.

Я создаю приложение Cordova (PhoneGap), и у меня есть все, что хорошо масштабируется на iPhone 3GS, 4S и 5 и iPad 2, работает под управлением iOS7 и 3GS на iOS6

У меня также есть масштабируемый пользовательский интерфейс, который подходит для Moto G, LG Nexus 5, Google Nexus 5 и Samsung Galaxy S4, все под управлением Android 4.4

Но на Samsung Galaxy S2 и S3 Mini под управлением Android 4.1 я не могу установить начальный масштаб.

Метатег HTML viewport не работает на 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и если я добавлю немного Java к методу onCreate в основном Activity, в частности 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  );

}

Затем я получаю Moto G на 4,4, как и ожидалось:

Но точно такой же проект, работающий на Galaxy S2, не масштабируется.

Я ограничиваюсь тестированием на устройствах Samsung с 4.1 или рядом устройств на 4.4, поэтому, если кто-то может протестировать то же самое на 4.2 или 4.3, или кто-то на 4.1, не с Samsung, это было бы полезно.

Кто-нибудь знает как заставить Android 4.1 подчиняться setInitialScale()

Answer 1

Вы должны быть в состоянии добавить некоторые javascript на свои веб-страницы, которые будут масштабировать контент, когда он будет выбран вашим веб-просмотром. Вот пример, который будет масштабировать ваш html контент так, чтобы контент соответствовал доступной ширине экрана:

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

Это будет работать для старых (до 4.2) и новых веб-просмотров на основе хрома (4.2+).

HTHS

Answer 2

@Petey показал мне решение, но для полноты вот моя версия с чуть большим контекстом телефонной пропасти:

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;
}