在平板电脑景观上使用不同的视口答案

【问题标题】：Use different viewport on tablet landscape在平板电脑景观上使用不同的视口
【发布时间】：2014-12-12 18:34:12
【问题描述】：

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

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

但对于纵向，它需要 width=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>

【问题讨论】：

检查生成的源时，它会正确更改。为什么它在我的 ipad 上不起作用？在准备好文件和不准备文件的情况下进行了尝试。我需要其他方法吗？
好的，所以我需要在其中添加纵向或横向： if (screen.width.. 那需要是 if screensize.portrait 或其他东西

标签： css viewport tablet

【解决方案1】：

在没有视口宽度的静态值的情况下工作会更好。因此，如果您的布局必须适合具有不同分辨率的其他设备，您将不会遇到问题。带有内容标签：

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

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

【讨论】：

不，这不起作用，与删除元视口标签相同。我需要在横向上“缩放”，以便页面的所有内容都可见。（该网站没有响应，不需要！）。宽度=1600 可以。
我知道这可以用 CSS 完成，但我正在寻找其他解决方案，我的全屏背景滑块会分开...添加视口宽度是完美的，但不适用于纵向。

【解决方案2】：

这似乎有效：D

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

【讨论】：

【解决方案3】：

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

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

【讨论】：