我尝试设置此website的初始比例。
我尝试了这个:
document.body.style.zoom = '0.8';
还有这个:
document.body.style.webkitTransform = 'scale(0.8)';
不幸的是,时间栏的滑块失去了其功能。有人知道为此工作吗?谢谢大家的想法。
更新:新方法:
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
在这里,什么都没有发生。
编辑:另一种方法:
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=0.8, user-scalable=no');
不幸的是没有成功。
最佳答案
要设置初始比例,您需要在元数据中调整视口。
目前,您的元标记将小数位数设置为1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
将1.0更改为0.8,它应该进行相应的调整。
<meta name="viewport" content="width=device-width, initial-scale=0.8" />
对于它的价值,我使用浏览器窗口调整了它的大小,当我单击按钮时,缩放仍然可以正常工作。
(即使在全屏模式下,该栏也似乎无法正常工作;我有一台15英寸的笔记本电脑,并且该栏滑块不起作用,但是按钮有效;您可能隐藏了该栏?)
希望这可以帮助
编辑
user-scalable
的允许值为yes或no,不是0和1。如果您希望用户不可扩展,则将其设置为no。同时设置
initial-scale
和maximum-scale
重新编辑
有关如何使用jquery编辑元标记的信息,请参见https://stackoverflow.com/a/9232064/1675954
JavaScript解决方案:遵循以下语法
document.querySelector('meta[name="viewport"]').setAttribute("content", _desc);
另请参见this article有关媒体查询的更新