Подтвердить что ты не робот

Каков наилучший метод повторной рендеринга веб-страницы при изменении ориентации?

У меня есть флэш-макет CSS, который плохо переносится на iphone, когда я меняю ориентацию. (Он отлично выглядит, когда он обновляется).

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

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);

Edit:

Две основные проблемы при тестировании на iphone:

У меня есть ширина 100%, с правильным выравниванием фонового изображения. Когда я меняю ориентацию с портрета на пейзаж, ширина тела остается такой, как она отображается в портретном режиме и наоборот. Это больше проблема от пейзажа к портрету, так как страница слишком широкая, и кажется, что она делает изображения дважды.

4b9b3361

ОТВЕТЫ

Ответ 1

Предполагая, что ваш CSS уже счастливо отображается на экранах мобильных устройств различного размера, вам нужно определить окно просмотра в <head> вашего шаблона.

Например, это устанавливает ширину страницы как ширину экрана устройства, а начальный масштаб 100%. Начальный масштаб применяется при загрузке страницы, но не при изменении ориентации.

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

Добавив параметр максимального масштаба = 1.0 в окно просмотра, вы заставите iPad/iPhone поддерживать уровень масштабирования и переформатировать страницу при изменении ориентации. Недостатком этого является то, что он отключит масштабирование. Тем не менее, преимущество заключается в том, что вы можете выполнить корректировки макетов с помощью медиа-запросов, чтобы представить контент соответствующим образом для текущей ориентации. Подробнее о видовом экране можно узнать здесь: Выбор ViewPort

Теперь в мультимедийных запросах. Вы должны размещать медиа-запросы в нижней части вашего CSS файла и в порядке наименьшей ширины до наибольшей ширины для ширины экрана. Например, взятый из примера Html5BoilerPlate CSS:

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

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

Объединяя фиксированный уровень масштабирования с 1.0 и медиа-запросами, вы можете сделать свой сайт изменчивым по размеру и ориентации экрана без javascript. Очевидно, что вам нужно убедиться, что сайт хорошо разработан, поэтому пользователям не нужно масштабировать. Если ваш сайт оптимизирован для мобильных устройств, это не должно быть проблемой.

Обратите внимание: другие мобильные браузеры без сафари могут перенастроить страницу без установки максимальной шкалы в окне просмотра. Но это поведение непоследовательно, и большинство разработчиков, похоже, обслуживают устройства Apple, даже если реализация хуже, чем другие устройства. Некоторые другие устройства будут поддерживать уровень масштабирования и возвращать область просмотра при изменении ориентации. Но все устройства могут исправить уровень масштабирования до 1.0.

Ответ 2

2015 обновление

Все остальные ответы неверны или устарели. Вот что работает:

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

Ответ 3

Используется метод, который вызывает перерисовку и оплату в одном стеке javascript. Не увлекайтесь конкретными ответами на видовом экране, так как это часто является требованием доступности для сохранения масштабирования и т.д.

$(window).on('orientationchange', function() {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
});

Или эквивалент без jquery

window.addEventListener('orientationchange', function () {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
});

Ответ 4

У меня была аналогичная проблема, и именно так я исправил ее с помощью jQuery.

В моем случае стили не менялись правильно для моего элемента <nav>. Я использовал модифицированную версию кода kidkaos77 в сочетании с $.get(), чтобы загружать определенную часть страницы:

$(window).bind("resize",function() {
    //on resize reload only nav & replace
    $.get("index.php" +  ' nav', function(data) {
        $("nav").replaceWith($(data).find("nav"));
    });
});

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

Ответ 5

Другим вариантом может быть добавление и удаление классов CSS из ваших элементов html (div, var, span и т.д.). Таким образом, вы можете изменять только те элементы, которые дают вам проблемы, а также вы можете настроить контент в немобильных браузерах, если пользователь изменит размер окна браузера.

Вот код Javascript/JQuery, который вам понадобится:

// Code to run when page has finished loading
$(function() {
    // Add CSS-class to body depending on device platform using user agent string
    // You can add more validations here and/or separate Android from iPhone or add more customized classes like "landscape_iPad", "landscape_iPhone", etc.
   // You can also validate browser types and add classes like "background_IE" or "background_Chrome", etc
    if ((navigator.userAgent.indexOf("iPad") != -1)) {
        $("#background").addClass("landscape");
    } else if ((navigator.userAgent.indexOf("Android") != -1) || (navigator.userAgent.indexOf("iPhone") != -1) || 
    (navigator.userAgent.indexOf("iPhone") != -1)) {
        $("body").addClass("iPhone");
    }

    // Get the initial orientation on iOS devices
    if (!isNaN(window.orientation)) {
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    } else {
        // Choose layout depending on viewport/window width
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    }

    // Bind orientationChange (or viewport/window size changes)
    if (window.onorientationchange != undefined) {
        window.onorientationchange = function() {
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        }
    } else {
        // Use landscape styling if it wider than 980 pixels. 
        // This is for non mobile browsers, this way if the user resize the browser window, content will adjust too.
        $(window).bind('resize', function(){
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        });
    }
});

И вот CSS-класс для элемента "background":

#background.portrait {
    position:absolute;
    top:0px;
    left:0px;
    width:768px;
    height:946px;
    z-index:0;
    background:url(background.png) top center no-repeat;
}
#background.landscape {
    position:absolute;
    top:10px;
    left:20px;
    width:1024px;
    height:724px;
    z-index:0;
    background:url(background_landscape.png) top center no-repeat;
}

Таким образом вы можете настроить поведение ландшафта и портрета, и вы можете добавить больше кладов, таких как: "landscape_iPhone", "portrait_Android" или все, что вам нужно для управления рендерингом страницы для каждого конкретного устройства.

Кроме того, вам не нужно перезагружать страницу, она будет регулировать ее на лету.

Надеюсь, это поможет вам или кому-то еще =), это позволило мне создать веб-сайты, настроенные для каждого размера экрана, мобильного бренда или даже типа браузера с тем же HTML, но с разными классами CSS.

Ответ 6

Попробуйте что-то вроде этого:

$(function(){

    changeOrientation(window.orientation == 0 ? "portrait" : "landscape");

    $('body').bind('orientationchange',function(event){
        changeOrientation(event.orientation)
    });

    function changeOrientation(ori){
        $("#orientation").removeClass('portrait landscape');
        $("#orientation").addClass(ori);
    }     
});

Ответ 7

По моему опыту, лучший способ - сделать так, чтобы это было

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width /">
<meta name="apple-mobile-web-app-capable" content="yes"/>

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

Ответ 8

$(window).bind('resize', function() { location.reload(); });

Этот код работал у меня.