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

Мне нужно уместить веб-сайт шириной 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, но мне нужно прокручивать по горизонтали, чтобы увидеть остальную часть страницы.

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

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

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

РЕДАКТИРОВАТЬ:

Я обновил свой 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–100 пикселей бегущей страницы. Итак, мне нужно прокрутить вправо, чтобы просмотреть остальную часть веб-страницы. Я хотел бы иметь возможность уместить всю веб-страницу в область просмотра, даже если между областью просмотра и моей веб-страницей есть пространство.

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

ОБНОВЛЕНИЕ:

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

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

html ipad css viewport
person cvanorman    schedule 10.11.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

Но Google сказал, что фиксированная область просмотра - плохой метод, и вы должны использовать «ширину устройства», а затем сделать веб-сайт адаптивным.

информация об обновлении инструментов веб-мастера

person Chris Pateman    schedule 10.11.2014
comment
Да, я пробовал это раньше, и вы правы, он должен быть отзывчивым. К сожалению, не меняя немного расположение элементов на киоске, я должен придерживаться текущих размеров. - person cvanorman; 11.11.2014
comment
Да, это просто увеличивает масштаб веб-страницы на iPad. - person cvanorman; 11.11.2014
comment
В основном моя текущая проблема связана с тем, что часть ширины свисает с края области просмотра iPad. Итак, высота масштабируется правильно, но мне нужно прокрутить вправо, чтобы увидеть остальной контент. Я хотел бы иметь возможность видеть весь интерфейс без прокрутки. Я также не против, чтобы были пробелы, если я могу видеть всю веб-страницу и взаимодействовать с ней. - person cvanorman; 11.11.2014
comment
Ваш метод был самым полезным в поиске моего решения. Спасибо вам за помощь! - person cvanorman; 11.11.2014

arrow_upward
0
arrow_downward

Попробуйте сделать 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;
}
person Flyswat    schedule 10.11.2014
comment
Это не сработало, отображает то же, что и device-width; на айпаде - person cvanorman; 11.11.2014