css - 在平板电脑横向上使用不同的视口(viewport)

Question

我使用以下视口(viewport)显示平板电脑上的所有内容，我的网站只有 980 像素宽度。 当我使用它时，网站上的所有内容都是可见的，我喜欢这个。

<meta name="viewport" content="width=1600" />

但对于纵向，它需要width=1000。 有什么方法可以玩 orientation:landscape 吗？ 我正在寻找一个 js 解决方案。

我尝试使用 css 解决方案，但我的全屏背景 slider 当时无法正常工作(不是全屏)。因此，如果有人知道如何在平板电脑横屏时更改元内容宽度，请告诉我。

尝试了一些没有运气的解决方案，我想我已经接近了:

<meta id="viewport" name="viewport" content="width=1000">

<script>
    $(document).ready(function() {
        if (screen.width > 1000) {
            document.getElementById("viewport").setAttribute("content", "width=1600");
        }
    });
</script>

Answer 1

如果没有视口(viewport)宽度的静态值，效果会更好。因此，如果您的布局必须适应具有不同分辨率的其他设备，您将不会遇到问题。使用内容标签:

<meta name="viewport" content="width=device-width" />

您的布局宽度固定为设备的最大值。无论您处于纵向模式还是横向模式，它都适合。