Question

我猜答案是否定的，但是有没有一种可靠的方法可以使网页具有响应性而无需在头部添加视口元标记？

我添加了一个登录表单容器，该容器的宽度为400px，垂直和水平居中。在台式机上看起来不错，但在移动电话上访问该页面时，它会缩小并显得很小。用户必须多次滑动才能放大，才能使用登录表单。

我无法接近头部。我只能在体内创建一个容器。但是，我可以为任何内容和基本JavaScript添加CSS。我的访问权限受到限制，因为该网页是由服务器程序生成的。它仅允许添加CSS文件以及页眉和页脚HTML文件。基本上，它限制了我使用自定义容器包装表单和错误容器。

Answer 1

快速浏览一下（例如Can I change the viewport meta tag in mobile safari on the fly?），看来您真的可以使用JavaScript创建和注入相关的元标记，例如：

lmap.addBaseLayer(new LTileLayer(myURL));

Test page：在点击执行以上功能的按钮之前，您应该看到宽的黑色暗段。之后，该段落应适合视口。

Answer 2

您可以使用CSS的@media规则来构建自适应网站。

媒体查询允许您根据设备类型和特征来应用特定的CSS样式。考虑下面的代码，例如：

body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

此代码将导致您的页面背景颜色变为蓝色，直到屏幕宽度为<= 600像素为止。

阅读MDN article，以获得有关媒体查询的更详细说明。

Answer 3

您可以使用JavaScript来编程自己的响应行为。一个简单的示例是按设备的像素密度缩放html容器。

“ window.devicePixelRatio”为您提供每个css像素实际的像素数。然后按其缩放容器：

const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";

Css媒体查询可能无法正常工作，但是当您乘以上面的pixelDensity时，可以再次使用javascript根据调整后的屏幕尺寸动态加载样式。

Answer 4

您可以使用JavaScript来做到这一点，但只有在页面加载后才能应用，因此在您的情况下没有用...