Question

我的问题快速概述：

我创建了一个移动网站，它看起来很棒。在平板电脑上移动它看起来很可怕。就像它从左右延伸5x一样。想象一下，你的脸水平伸展到4英尺。

研究和可能的解决方案

我有一种感觉我可以观看。正如我想的那样，如果我可以SCALE布局而不是让浏览器提供更多的宽度，然后我的布局扩展到适应。

文章告诉我，如果我设置了视口元标记 width = 300 或任何自定义，那么浏览器会缩放整个页面以适应当前视口的实际宽度，因此300px将覆盖1200px，至少这是我的印象是。

然而，无法正常工作。无论我做什么视口设置，它们似乎都没有影响缩放。

我想要什么

我希望我的页面可以扩展。我不希望以 em 为单位指定每个边框宽度，而不是创建十几个媒体查询检查点来增加字体大小。特别是因为我的布局保持不变只是需要扩大规模。

如果我追求不同的布局，那么显然我会使用媒体查询。

我试过这个：

<meta name="viewport" content="width=300">

Answer 1

我用一些javascript解决了它

首先添加（我正在使用玉石）

meta(id="myViewport", name="viewport", content="width=device-width")

现在window.innerWidth将提供正确的浏览器宽度，而不是浏览器设置的任意数字，如960，这是360宽度手机和2100+平板电脑上的Chrome报告。

现在只检查屏幕是否宽，然后限制视口的宽度，这样浏览器会将其缩放，因此，对于我的平板电脑，500像素将占用2100像素。

if (window.innerWidth > 450) {
            var mvp = document.getElementById('myViewport');
            mvp.setAttribute('content','width=500');
} 
        //- first set device width so window.innerwidth shows actual width then change accordingly.

视口宽度没有效果？

1 个答案: