在移动浏览器中显示页面时自动缩小？答案

【问题标题】：Automatically zoom out when displaying page in mobile browser?在移动浏览器中显示页面时自动缩小？
【发布时间】：2022-01-09 08:28:23
【问题描述】：

我正在一个网页（Merlot 模板）中开发一个简单的 GitPages 小程序（HTML/JavaScript/JQuery）。这一切都很好，除了当页面以纵向模式（Android 或 iPhone）显示在 Chrome 移动浏览器上时，它会以缩放模式出现。当我捏缩小它时，它很合适，但我每次都必须这样做。

示例页面在这里：https://securityessentials.github.io/ThreeRandomWords/ThreeRandomWords.html。

我怎样才能让它自动缩小？

查尔斯

【问题讨论】：

标签： google-chrome mobile github-pages pinchzoom

【解决方案1】：

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

<meta name="viewport" content="width=device-width, initial-scale=1">

此元标记应设置初始比例

【讨论】：

谢谢@rmbdeivis。该行已经在我的 _includes/head_custom.html 代码中。但我现在看到它已被 gitpages 解析器删除并替换为。所以这是一个 Git Pages 模板错误。任何人都可以提出一种解决方法吗？
我试过了： $('meta[name="viewport"').attr("content", "width=640, initial-scale=0.5");这确实改变了元标记。但 Chrome 移动版似乎只是忽略了它。
您确定您的 head_custom.html 包含正确吗？页面上是否出现了 head_custom.html 中的任何其他元标记？我不认为您可以在浏览器加载后使用 JavaScript 调整元标记。
嗨@rmbdeivis，当然修改元标记如上所述工作 - 因为它显示在DOM中修改。浏览器何时以及是否对更改起作用，我不知道。但是是的，head_custom.html 被包含并出现在页面源代码中。

【解决方案2】：

啊哈！感谢@rmbdeivis 的 cmets，这是一个解决方案：

在 head 部分（在 Git Pages 中表示 _includes/head_custom.html）我添加了以下内容来更改视口指令。如果这是在正文部分，则它不起作用 - 浏览器可能会在开始解析正文时设置视口。

<script>
    // Fix template to make zooming work correctly in Chrome on mobile.
    $('meta[name="viewport"').attr("content", "width=device-width, initial-scale=0.5, maximum-scale=5.0, minimum-scale=0.5"); 
</script>

【讨论】：

另见github.com/pages-themes/merlot/issues/15