Масштабировать страницу до 1.0, используя метатеги

Я использую эти две функции для установки и reset значений шкалы, когда я запускаю приложение JS с HTML-страницы.

function setMeta(){
        alert("meta set");
        oldcontent=$('meta[name=viewport]').attr('content') //store the current value
        $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0');
}

function resetMeta(){
        alert("meta reset");
        $('meta[name=viewport]').attr('content', oldcontent);

}

Код работает отлично, за исключением того, что HTML-страница масштабируется до большего значения, она не устанавливается равной 1.0, как в методе setMeta. Другие значения, такие как user-scalable, работают нормально. Пример. На странице HTML мы масштабируемы, но в приложении это не так.

Это не работает: document.body.style.zoom="100%"; почему не работает перезапуск масштаба до 1.0?

Ответ 1

Этот подход, к сожалению, никогда не сработает, потому что переменная, сохраняющая атрибут content метатега viewport (в данном случае defaultContent), всегда будет извлекать текущее значение. Единственный способ сделать эту работу - определить defaultContent явно, как я сделал с customContent.

Во-первых, давайте посмотрим, почему исходный подход не работает:

Попробуйте этот код на console во время посещения Smashing Magazine:

defaultContent = jQuery('meta[name=viewport]').attr('content'); // store the current value in a global variable
console.log(defaultContent);

function setV(){
    // override the global variable value with a scoped variable
    var customContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0';
    jQuery('meta[name=viewport]').attr('content', customContent);
    console.log('Set viewport content to: ' + customContent);
}
function resetV(){
    jQuery('meta[name=viewport]').attr('content', defaultContent);
    console.log('Reset viewport content to: ' + defaultContent);
}

Убедитесь, что вы тестируете setV(); или resetV(); непосредственно на консоли, набрав их и снова нажав Run. Как вы можете видеть, это не сработает, потому что defaultContent установлено для получения динамического значения, которое изменяется функцией setV().

Чтобы заставить его работать

Как я уже говорил, если вы хотите, чтобы он работал на вашем сайте, вы могли бы определить новую переменную со значением defaultContent (атрибут содержимого по умолчанию метатега viewport), поэтому вы правильно сохранили его с самого начала - вот так:

defaultContent = 'width=device-width, initial-scale=1.0';
customContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0';

function setV(){
    jQuery('meta[name=viewport]').attr('content', customContent);
    console.log('Set viewport content to: ' + customContent);
}
function resetV(){
    jQuery('meta[name=viewport]').attr('content', defaultContent);
    console.log('Reset viewport content to: ' + defaultContent);
}

Не то, чтобы я изменил $ на jQuery, чтобы избежать конфликта в Smashing Magazine.

Ответ 2

Следует отметить, что при сбросе тега viewport вы должны помнить перезаписать предыдущие атрибуты видового экрана, которые вы установили. Например, если вы хотите установить тег viewport на

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

В вашей функции resetMeta() вам нужно вернуть значения примерно так:

<meta name="viewport" content="width=920, initial-scale=5.0, maximum-scale=5.0, user-scalable=yes" />

И не что-то вроде этого:

<meta name="viewport" content="initial-scale=5.0" />

Помня о том, чтобы не пропустить ни ширины, ни шкалы.

Измененная версия вашего примера: http://hosting.ambc.hostei.com/html/test.html