快速帮助扩展网站答案

【问题标题】：Quick help scaling a website快速帮助扩展网站
【发布时间】：2017-07-12 15:52:55
【问题描述】：

我尝试设置此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');

很遗憾没有成功。

【问题讨论】：

答案已重新更新。试试看。

标签： javascript html web-scraping zooming scale

【解决方案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 的允许值为 yes 或 no，而不是 0 和 1。如果您希望它不可扩展，请将 user-scalable 设置为 no。同时设置initial-scale 和maximum-scale

重新编辑

请参阅https://stackoverflow.com/a/9232064/1675954 了解如何使用 jquery 编辑元标记

javascript 解决方案：遵循此语法

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

请参阅this article 以获取媒体查询的更新

【讨论】：

@Rachel：谢谢你的帮助。我想我仅限于 javascript，因为我必须在 Swift 的 WKUserscript 中设置比例。真的不明白你说的全屏是什么意思？将我的浏览器（Safari、Chrome）中的页面设置为全屏，滑动条可以正常工作。
@Rachel：我试图在 javascript 中执行你的建议。查看更新。
@JoschHazard 回答已编辑。另见css-tricks.com/snippets/html/responsive-meta-tag
@ Rachel：我的也是 15"。我正在 Chrome DevTools 中尝试上面的脚本。即使使用user-scalable 是或否，也没有任何反应。
@JoschHazard 是的，我刚才又试了一次，它在全屏下运行良好。我认为是一时的故障！（元仍为 1.0）尝试使用新的元标记放置测试页

【解决方案2】：

Chrome Window Resizer 一直是检查网页是否适用于所有平台的救命稻草。

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

【讨论】：

@D88naimi：这能解决我的问题吗？