首页 > 解决方案 > 没有元标记的响应式网页?

问题描述

我猜答案是否定的,但有没有一种可靠的方法可以在不向头部添加视口元标记的情况下使网页响应?

我添加了一个 400px 宽并垂直和水平居中的登录表单容器。它在桌面上看起来不错,但是当您在手机上访问页面时,它被缩小并且看起来很小。用户必须多次滑动才能放大,以便他们可以使用登录表单。

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

标签: javascripthtmlcssresponsivemeta

解决方案


快速浏览一下(例如,在 Can I change the viewport meta tag in mobile safari?

<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>

测试页面:在点击执行上述功能的按钮之前,您应该看到宽泛的黑色段落。之后,该段落应适合视口。


推荐阅读