время для моего первого собственного stackoverflowquestion, так как эта штука сводит меня с ума весь день. Сегодня я одолжил iPad, чтобы протестировать сайт, который поставляется с дополнительными телефонными и планшетными версиями. (на нем только сафари) макет представляет собой полностью статичную вещь с некоторой графикой, и они хотят, чтобы это было 1: 1. так что я узнал о мобильных устройствах, добавил
<meta name="viewport" content="width=x" />
и получил идеальную версию для телефона. но когда дело дошло до планшета, у меня возникли проблемы.
Планшет у меня вертикальный. в данном случае он имеет 477x656 пикселей. поэтому он должен подходить по высоте и хорошо отображаться на каждом планшете, покрывая весь дисплей в портретном режиме и располагаясь по центру по горизонтали в альбомном режиме.
так что я подумал, что просто поставил
<meta name="viewport" content="height=656" />
в коде, и браузер отображает это так же, как в мобильной версии, только с нашей высотой как viewport-master вместо ширины. это было бы идеальным универсальным решением, удовлетворяющим потребности клиентов так же, как и телефонная версия. (ну, конечно, разница в том, что в телефонной версии вы будете прокручивать вверх и вниз, в то время как в версии для планшета будет немного пустого места слева и справа, особенно в ландшафтном режиме.)
в основном css:
body {
margin:0 auto;
width:477px;
height:656px;
}
и результат - полный провал:
- в альбомном режиме страница отображается по вертикали больше, чем доступное пространство в браузере. (кажется, что высота здесь игнорируется)
- в портретном режиме к тегу html добавляется огромное количество ширины, так что тег body можно увидеть только наполовину.
добавление моей ширины в область просмотра просто заставляет браузер игнорировать высоту и вести себя так, как должен в телефонной версии.
поэтому я подумал, я заставляю html-width
html { max-width:477px !important; }
или около того, но не помогло. поэтому я подумал, хорошо, забудьте об этом и обойти портретную версию, используя
html { margin:0 auto; }
@media (orientation:portrait) { html { margin:0; }}
Итак, после долгого отчаяния я обнаружил, что: добавление viewport-meta height = x переводит страницу в альбомный режим
это в основном (я думаю) из-за того, что safari вычисляет ширину области просмотра в соответствии с заданной высотой и пропорциями экрана (в ландшафтном режиме) вместо заданного html. в результате получаются альбомные пропорции даже в портретном режиме ... как ни странно. и да - это не то, что вы ожидаете, мне кажется, это ошибка браузера. или я здесь совершенно не прав, неправильно понимая всю эту штуку с окном просмотра?
so
- как заставить браузер работать правильно? рассчитать ширину html в соответствии с моим html / css на основе моей заданной высоты?
- и как мне отобразить всю страницу в альбомной ориентации? какого черта он больше?
любые подсказки высоко ценятся! (Я действительно физически измотан сейчас ... оказывается, что я больше не привык к программам, которые не делают то, что я ожидаю)
ммм, так вот мои тестовые сценарии, с которыми можно повозиться:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=656" />
<style>
html { background-color:#8b8b8b; }
html { width:477px !important; }
@media (orientation:landscape){
html { margin:0 auto; background-color:#e1006e; }
#p { display:none; }
}
@media (orientation:portrait){
html { background-color:#8f9d6a; }
#l { display:none; }
}
body {
position:relative;
background-color:#000;
margin:0 auto;
padding:0;
width:477px;
height:656px;
}
.container {
margin:0 auto;
width:477px;
height:656px;
background-color:#232529;
color:#9bbe0a;
}
.content { padding:250px 0 0 45px; }
.footer { position:absolute; left:22px; bottom:2px; }
.footer, .footer a, .footer a:link, .footer a:visited, .footer a:hover, .footer a:active { color:#9bbe0a; }
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>stuff</p>
<div id="l"><b>Landscape</b></div>
<div id="p"><b>Portrait</b></div>
<pre>
<script type="text/javascript">
document.write(
'\r\rw.orientation: '+window.orientation+
'\rscreen: '+screen.width+'x'+screen.height+
'\rbody.client: '+document.body.clientWidth+'x'+document.body.clientHeight+
'\rw.outer: '+ window.outerWidth+'x'+window.outerHeight+
'\rw.inner: '+ window.innerWidth+'x'+window.innerHeight+
'\rdocEl.client: '+document.documentElement.clientWidth+'x'+document.documentElement.clientHeight
);
</script>
</pre>
</div>
</div>
<div class="footer"><a href="#">blah</a> | <a href="#"">blah</a></div>
</body>
</html>
