Положение основного блока контента перепутано на iPad - PullRequest
Новая
       28

Положение основного блока контента перепутано на iPad

2 голосов
/ 10 декабря 2011

У меня возникают некоторые проблемы с оптимизацией страницы для использования на ipad.

К сожалению (я полагаю), я не использовал em-измерения для своих элементов, поэтому уменьшение масштаба таким способом невариант.Страница очень сложная, и изменить ее все будет невозможно.

Теперь, используя ... 

<meta name="viewport" content="width=device-width,initial-scale=0.8,minimum-scale=0.8,maximum-scale=1.5" />

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

Даже если я установлю «минимальный масштаб» на 0,1, я не получу надлежащих результатов.

Я использую центрированный макет (с помощью margin: 0 auto;) и, как ни странно, в портретном режиме моя область контента, кажется, прилипает к левой стороне страницы, оставляя огромный пробел справа,И, как упоминалось ранее, я не могу масштабировать страницу таким образом, чтобы я мог видеть всю область содержимого, которая имеет ширину 1026 пикселей, но в конечном итоге становится немного шире, поскольку мне пришлось разместить на ней изображение, которое растягивается примерно до,30px с каждой стороны.

Это CSS для моей области контента: 

    position:               relative;
    width:                  1026px;
    height:                 auto;
    top:                    40px;
    margin:                 0px auto;
    border:                 1px solid #e0e0e2;
    box-shadow:             inset 1px 2px 1px 0px #c6c6c6;
    -webkit-box-shadow:     inset 1px 2px 1px 0px #c6c6c6;
    -moz-box-shadow:        inset 1px 2px 1px 0px #c6c6c6;
    -o-box-shadow:          inset 1px 2px 1px 0px #c6c6c6;
    border-radius:          24px 24px 24px 0;
    -moz-border-radius:     24px 24px 24px 0;
    -webkit-border-radius:  24px 24px 24px 0;
    -o-border-radius:       24px 24px 24px 0;
    border-radius:          24px 24px 24px 0;
    background-color:       #ffffff;

Буду признателен за любую полезную информацию!Спасибо!

Ответы [ 2 ]

1 голос
/ 10 декабря 2011

Мне удалось найти рабочее решение проблемы масштабирования с помощью этого кода: 

        var detectOrientation=function(_init) {
            var orientation=window.orientation;
            if ((orientation==0||orientation==180)) { /*p*/
                $('viewportDefinition').setAttribute('content','width=1024px,initial-scale=0.7,minimum-scale=0.7,maximum-scale=2.5');
            } else if ((orientation==90||orientation==-90)) { /*l*/
                $('viewportDefinition').setAttribute('content','width=device-width,initial-scale=0.9,minimum-scale=0.9,maximum-scale=2.5');
            }
        };
        window.onorientationchange=detectOrientation;

Однако я все еще получаю неуместную область содержимого - она ​​не центрирована. Использование поля: 0 авто; и фиксированная ширина для него, как это возможно?

1 голос
/ 10 декабря 2011

попробуйте установить область просмотра на 1,0

Также вот несколько хороших объяснений о том, как использовать область просмотра ...

Особенности iPad: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

общий» https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

...