Question

我尝试设置此website的初始比例。

我试过了：

document.body.style.zoom = '0.8';

和此：

document.body.style.webkitTransform = 'scale(0.8)';

不幸的是，timeperiod-bar的滑块失去了它的功能。有谁知道这方面的工作方式？谢谢大家的想法。

更新：新方法：

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

遗憾的是没有成功。

Answer 1

要设置初始比例，您需要在元数据中调整视口。

目前，您的元标记将比例设置为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的允许值为是或否，而不是0和1。如果您希望它不可伸缩，请将用户可扩展设置为no。同时设置initial-scale以及maximum-scale

<强> RE-修改

请参阅https://stackoverflow.com/a/9232064/1675954了解如何使用jquery

编辑元标记

javascript解决方案：遵循此语法

document.querySelector('meta[name="viewport"]').setAttribute("content", _desc);

有关媒体查询的更新，请参阅this article

Answer 2

Chrome Window Resizer可以帮助您检查网页是否适用于所有平台。

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

快速帮助扩展网站

2 个答案: