Question

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

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

但对于肖像，它需要 width = 1000 。我们有什么方法可以玩方向：风景？我正在寻找一个解决方案。

我尝试使用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;}
}

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

3 个答案: