Используйте другой видовой экран на планшете

Question

Я использую следующий видовой экран, чтобы показать весь контент на моем планшете, мой сайт имеет ширину всего 980 пикселей. Когда я использую это, весь контент на сайте виден, и мне это нравится.

<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;}
}