Макет iPad масштабируется при повороте с портрета на пейзаж

У меня есть добавленный метатег "viewport" "width=device-width,initial-scale=1.0", а на iPad страница загружается отлично в ландшафтном режиме, она прекрасно переключается на портрет, и когда я поворачиваю ее обратно в альбом, она масштабирует страницу вверх и Я должен ущипнуть его масштабирование до масштаба 1.

Я могу исправить это, добавив "maximum-scale=1.0, user-scalable=no", но мне было интересно, есть ли способ, которым я мог бы исправить это, не убрав от пользователя возможность увеличения страницы.

Если у вас есть предложения, я хотел бы их услышать,
Спасибо!

ОТВЕТЫ

Ответ 1

------ Обновление ------

Это больше не проблема в iOS7. И лучше установить Скотт Джел на github scottjehl/iOS-Orientationchange-Fix, который работает для iOS6.

------ Оригинальный ответ ------

Джереми Кейт (@adactio) имеет хорошее решение для этого в своем блоге Ориентация и масштаб

Сохранять масштабируемость

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

Затем отключите масштабируемость с помощью javascript до gesturestart с помощью этого script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Ответ 2

Скотт Йелл придумал фантастическое решение, которое использует акселерометр для прогнозирования изменений ориентации. Это решение очень отзывчивое и не мешает жесту увеличения.

https://github.com/scottjehl/iOS-Orientationchange-Fix

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

Минимальный источник:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

Ответ 3

Надеюсь, это поможет...

<head>

<style type="text/css">
<!--

/*
    I began with the goal to prevent font scaling in Landscape orientation.
    To do this, see: http://stackoverflow.com/questions/2710764/

    Later, I just wanted to magnify font-size for the iPad, leaving
    the iPhone rendering to the css code.  So ...

    (max-device-width:480px) = iphone.css
    (min-device-width:481px) and
        (max-device-width:1024px) and
            (orientation:portrait) = ipad-portrait.css
    (min-device-width:481px) and
        (max-device-width:1024px) and
            (orientation:landscape) = ipad-landscape.css
    (min-device-width:1025px) = ipad-landscape.css

*/

@media only screen and (min-device-width: 481px)
{
    html {
        -webkit-text-size-adjust: 140%;   /* none for no scaling */
    }
}

-->
</style>

</head>

Ответ 4

Исправление, используемое jQuery mobile, находится здесь

https://github.com/scottjehl/iOS-Orientationchange-Fix

Минимизированный

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT / GPLv2 License.*/(function (a) { function m() { d.setAttribute("content", g), h = !0 } function n() { d.setAttribute("content", f), h = !1 } function o(b) { l = b.accelerationIncludingGravity, i = Math.abs(l.x), j = Math.abs(l.y), k = Math.abs(l.z), (!a.orientation || a.orientation === 180) && (i > 7 || (k > 6 && j < 8 || k < 8 && j > 6) && i > 5) ? h && n() : h || m() } var b = navigator.userAgent; if (!(/iPhone|iPad|iPod/.test(navigator.platform) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(b) && b.indexOf("AppleWebKit") > -1)) return; var c = a.document; if (!c.querySelector) return; var d = c.querySelector("meta[name=viewport]"), e = d && d.getAttribute("content"), f = e + ",maximum-scale=1", g = e + ",maximum-scale=10", h = !0, i, j, k, l; if (!d) return; a.addEventListener("orientationchange", m, !1), a.addEventListener("devicemotion", o, !1) })(this);

Полный источник

/*! A fix for the iOS orientationchange zoom bug.
 Script by @scottjehl, rebound by @wilto.
 MIT / GPLv2 License.
*/
(function(w){

    // This fix addresses an iOS bug, so return early if the UA claims it something else.
    var ua = navigator.userAgent;
    if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){
        return;
    }

    var doc = w.document;

    if( !doc.querySelector ){ return; }

    var meta = doc.querySelector( "meta[name=viewport]" ),
        initialContent = meta && meta.getAttribute( "content" ),
        disabledZoom = initialContent + ",maximum-scale=1",
        enabledZoom = initialContent + ",maximum-scale=10",
        enabled = true,
        x, y, z, aig;

    if( !meta ){ return; }

    function restoreZoom(){
        meta.setAttribute( "content", enabledZoom );
        enabled = true;
    }

    function disableZoom(){
        meta.setAttribute( "content", disabledZoom );
        enabled = false;
    }

    function checkTilt( e ){
        aig = e.accelerationIncludingGravity;
        x = Math.abs( aig.x );
        y = Math.abs( aig.y );
        z = Math.abs( aig.z );

        // If portrait orientation and in one of the danger zones
        if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
            if( enabled ){
                disableZoom();
            }           
        }
        else if( !enabled ){
            restoreZoom();
        }
    }

    w.addEventListener( "orientationchange", restoreZoom, false );
    w.addEventListener( "devicemotion", checkTilt, false );

})( this );

Ответ 5

Кажется, это ошибка в iOS 4, которая может быть исправлена ​​с помощью следующего фрагмента Javascript, однако это отключает возможность пользователя делать снимок для увеличения:

https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d

Ответ 6

Это работает!

 <script >
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
    document.addEventListener('orientationchange', function () {
        viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1';
    }, false);
  }
}
</script>

Ответ 7

Для того, чтобы script работал и обошел второстепенную настройку 2-го жестов, как в событии изменения orienatation, установите max до 1.00099 вместо 1.0

Ответ 8

Когда вы говорите, что он масштабирует страницу, это все элементы или только размер шрифта текста?... Для фиксации размера шрифта вы можете использовать:

html {
    -webkit-text-size-adjust: 100%;
}

Ответ 9

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

Смотрите здесь: fooobar.com/questions/37439/...

Ответ 10

Первое исправление работало для меня со следующими изменениями.

Измените начальную шкалу на .8, минимум до 0,25 и максимум до 1,6.

Используйте тег "meta" 

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


<script ="text/javascript">
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=.25, maximum-scale=1.6, initial-scale=.8';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Ответ 11

в мета:

%meta{content: "width=device-width, initial-scale=1.0, minimum-scale=0.25, maximum-scale=1.6, user-scalable=yes", name: "viewport"}

для глобального script:

if navigator.platform.toLowerCase() is "ipad"
  viewport = $ "meta[name='viewport']"
  viewport_content = viewport.attr("content")

  # reset initial zoom
  viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"
  setTimeout =>
    viewport.attr "content", viewport_content
  , 0

  # reset zoom on rotate
  timeout = null
  window.onorientationchange = ->
    clearTimeout timeout if timeout?
    viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"
    timeout = setTimeout =>
      viewport.attr "content", viewport_content
    , 1000