在平板电脑横向上使用不同的视口

Question

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

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

但是对于纵向，它需要宽度= 1000。有什么方法可以玩定向：风景吗？我正在寻找一个js解决方案。

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

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

<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

没有视口宽度的静态值会更好。因此，如果您的布局必须适合具有不同分辨率的其他设备，则不会有问题。使用内容标记：

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

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

Answer 2

这似乎:D

<style>
    @media screen and (min-width:1000px) {
        @-ms-viewport{
            width:1600px;
        }
    }
    @media screen and (max-width:1000px) {
        @-ms-viewport{
            width:1000px;
        }
    }
</style>

Answer 3

背景图像滑块不是全屏的，由此 css 修复。

@media only screen and (orientation: landscape) {
    html{width: 1600px;}
    #maximage, #maximage .mc-image{width:100%!important; height:100%!important;}
}