我有一个为移动Safari浏览器构建的AJAX应用,该应用需要显示不同类型的内容。
对于某些内容,我需要user-scalable=1,对于其他内容,我需要user-scalable=0。
user-scalable=1
user-scalable=0
有没有一种方法可以在不刷新页面的情况下修改content属性的值?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
我意识到这有点老了,但是可以。一些JavaScript可以帮助您入门:
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
只需更改所需的部件,Mobile Safari就会尊重新设置。
更新:
如果您的源代码中还没有meta视口标签,则可以直接将其附加如下内容:
var metaTag=document.createElement('meta'); metaTag.name = "viewport" metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" document.getElementsByTagName('head')[0].appendChild(metaTag);
或者,如果您使用的是jQuery:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');