Как масштабировать веб-сайт фиксированной ширины в окне просмотра iPad

Question

Мне нужно иметь возможность разместить сайт шириной 2560 пикселей в окне просмотра iPad. Я в настоящее время

@viewport { 
    width: device-width; 
    max-zoom: .15; 
    orientation: landscape; 
} 
@-ms-viewport { 
    width: device-width; 
    max-zoom: .15; 
    orientation: landscape; 
} 
@-o-viewport { 
    width: device-width; 
    max-zoom: .15; 
    orientation: landscape; 
} 

и масштабирует его в окно просмотра на IPad, но у меня есть для прокрутки по горизонтали, чтобы увидеть остальную часть страницы.

Все, что мне нужно сделать, - это масштабировать веб-сайт внутри окна просмотра, поэтому мне не нужно прокручивать его, чтобы увидеть остальную часть страницы. Я в порядке, оставив пространство в окне просмотра, но я не могу его перенапрягать в окне просмотра.

Кто-нибудь знает, как я могу масштабировать веб-сайт 2560px на 1440px, чтобы он входил в видовое окно iPad? Размеры веб-сайта были установлены в соответствии с монитором 2560px на 1440px, используемым в качестве киоска для выставок.

Спасибо за помощь заранее!

EDIT:

Я обновил свой CSS @viewport к:

@viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-ms-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-o-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-webkit-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 
@-moz-viewport { 
    width: 2560px; 
    height: 1440px; 
    zoom: .05; 
    orientation: landscape; 
} 

Единственная проблема с моей текущей конфигурации я о 50-100px страницы наезда в моем окне просмотра. Поэтому мне нужно прокрутить вправо, чтобы просмотреть остальную часть веб-страницы. Я хотел бы иметь возможность разместить всю веб-страницу в окне просмотра, даже если есть пространство между окном просмотра и моей веб-страницей.

Я не могу изменить ширину, поскольку это все абсолютное позиционирование.

UPDATE:

Я нашел решение моей проблемы. По-видимому, iPad не принимал мои значения @viewport, поэтому я загрузил x-код и протестировал теги. Помимо небольшого расстояния в нижней части веб-страницы (чтобы сохранить соотношение сторон 4: 3 на iPad), веб-страница теперь прекрасно вписывается в видовое окно iPad.

<meta name="viewport" content="width=2560, height=1440, initial-scale=.40, user-scalable=no"> 

Answer 1

Вы должны были бы установить мета окна просмотра до размера вы хотите, например, ниже:

<meta name="viewport" content="width=2560,height=1440, initial-scale=1"> 

Но Google сказал, что фиксированный видовой экран является плохим методом, и вы должны использовать ' device-width ', а затем сделать сайт отзывчивым.

information about web master tools update

Answer 2

Попробуйте делать width: 100%; вместо width: device-width;

Пример:

@viewport { 
    webkit-width: 100%; 
    webkit-max-zoom: .15; 
    webkit-orientation: landscape; 
} 
@-ms-viewport { 
    webkit-width: 100%; 
    webkit-max-zoom: .15; 
    webkit-orientation: landscape; 
} 
@-o-viewport { 
    webkit-width: 100%; 
    webkit-max-zoom: .15; 
    webkit-orientation: landscape; 
}