IPad Rotate и SVG с помощью мобильного телефона jQuery

Question

У меня есть HTML-страница, содержащая следующее.Файл svg.js является ссылкой на svgweb, начиная с http://code.google.com/p/svgweb/

. Если вы просматриваете это на ipad и несколько раз поворачиваетесь от горизонтального к вертикальному, диаграмма исчезает внизу страницы.Кажется, что каждый раз, когда мы возвращаемся к вертикали, svg немного спрыгивает вниз по странице.

Подсказки относительно того, с чего начать, когда оцениваем.

  </div><!--content-->
</div><!--page-->
</body>
</html>

Answer 1

Я столкнулся с подобной ошибкой. Тот факт, что это происходит только на iPad (а не на iphone или android) после нескольких поворотов, заставляет меня подозревать, что это ошибка браузера для iPad. В качестве быстрого исправления я реализовал решение с использованием JavaScript, которое обнаружило поворот и вставило альтернативный html / css. Если ваше SVG-изображение маленькое, вы можете просто попытаться вставить его в DOM по очереди, чтобы вызвать переоценку.

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){
   // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

   else if (orientation === -180){

        // Upside down portrait.

    }

}

Код взят из: iPad не запускает событие изменения размера с вертикального на горизонтальное?

Answer 2

Обновлен скрипт для использования "180" вместо "-180" для // Перевернутого портрета.

Также добавлено, чтобы проверить, что платформа не отличается от iPad для запуска.

if(navigator.platform === 'iPad') {
        window.onorientationchange = function() {

        var orientation = window.orientation;

        // Look at the value of window.orientation:
        if (orientation === 0) {
        // iPad is in Portrait mode.

        } else if (orientation === 90) {
         // iPad is in Landscape mode. The screen is turned to the left.

        } else if (orientation === -90) {
         // iPad is in Landscape mode. The screen is turned to the right.

        } else if (orientation === 180) {
        // Upside down portrait.

        }
      }       
    }