21

当我从 HTML 页面启动 JS 应用程序时，我使用这两个函数来设置和重置比例值。

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 页面被缩放到更大的值，它不会像 setMeta 方法那样设置为 1.0。其他值如user-scalable工作正常。示例：在 HTML 页面中，我们可以缩放，但在应用程序中却不行。

这也不起作用：document.body.style.zoom="100%"; 为什么将比例重置为 1.0 不起作用？

4

2 回答 2

1

This approach is unfortunately never going to work, because the variable that stores the content attribute of the viewport meta tag (in this case defaultContent) is always going to fetch the current value. The only way to make this work is to define defaultContent explicitly, as I have done with customContent.

Firstly, let's see why the initial approach doesn't work:

Try this code on your console while visiting 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);
}

Make sure you test setV(); or resetV(); directly on the console, by typing them and clicking Run again. As you can see, it won't work because defaultContent is set to fetch a dynamic value, that gets changed by the setV() function.

To make it work

As I already mentioned, if you want it to work on your site, you could define a new variable with the defaultContent value (default content attribute of the viewport meta tag), so you have it properly stored from the start - like so:

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

Not that I changed $ to jQuery to avoid conflict at Smashing Magazine.

于 2013-04-17T22:47:18.550 回答
0

需要注意的一点，在重置视口标签时，一定要记得覆盖之前设置的视口属性。例如，如果您希望将视口标签设置为

<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

于 2013-04-11T13:58:24.367 回答