как изменить размер / увеличить веб-страницу в ipad - PullRequest
Новая
       2

как изменить размер / увеличить веб-страницу в ipad

3 голосов
/ 26 сентября 2011

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

<meta name="viewport" content="width=device-width, initial-scale=1">

из всего поиска, который я сделал, это должно сделать. К сожалению, это не работает для меня.

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

P.S. сайт здесь, если вы хотите взглянуть http://tmg.dev.dakic.com/mobile

Спасибо, Желько

Ответы [ 3 ]

9 голосов
/ 29 сентября 2011

Попробуйте, у меня была похожая проблема: 

    $(window).bind('orientationchange', function(event) {
    if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
        $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=2.0');
        $(window).resize();
    } else {
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=2.0');
        $(window).resize();
    }
    }).trigger('orientationchange');

Попробуйте иначе, используя функцию resize () при определенных событиях: 

 $(window).resize();
2 голосов
/ 30 сентября 2011

Обычно я использую событие orientationchange, чтобы добавлять / удалять классы CSS к содержимому и переходить оттуда, а не изменять размер области просмотра. Apple предоставляет некоторый автономный пример кода, хотя из памяти я думаю, что он включает в себя только 90 ° и 0 ° ориентации - вам тоже нужно -90 ° и 180 °, как в комментарии @zyrex.

Пример кода iPhoneOrientation (developer.apple.com)

Обновление за комментарий: Чтобы уточнить, я не изменяю размеры самих сущностей HTML, а изменяю используемые классы и полагаюсь на CSS для стилизации соответственно. В качестве упрощенного примера, скажем, я хочу переключаться между двумя классами элемента body, в зависимости от ориентации устройства, я сделал бы что-то подобное в моем Javascript: 

window.onorientationchange = updateOrientation;
// (Might want to do this onload too)

function updateOrientation(){
  var o = window.orientation, body = document.querySelector('body');

  switch(o){
    case 0: case 180:
      body.className = 'portrait';
      break;

    case 90: case -90:
      body.className = 'landscape';
      break;
  }
}

… и что-то подобное в разметке по умолчанию: 

<body class="portrait">
  <!-- stuff here -->

… а затем CSS, который делает все, что требуется - например, другая позиция для элемента тела background: 

body {background: url('images/something.png') no-repeat}
body.portrait {background-position: 30% 50%}
body.landscape {background-position: 10% 25%}

Обновление № 2 Вам также может понадобиться изменить директиву maximum-scale в вашем метатеге. Mobile Safari, как правило, выполняет масштабирование при смене портрета на альбомную, а не переделывает макет страницы, и это может быть тем, что вы видите.

Значение maximum-scale предотвращает это, но вы должны заметить, что это также означает, что пользователи не могут выполнять обычные операции масштабирования. Вот как будет выглядеть тег: 

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Обязательно проверьте ответы и здесь:

Как сбросить масштаб / масштаб веб-приложения при изменении ориентации на iPhone?

0 голосов
/ 27 сентября 2011

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

...