ориентация экрана для нескольких планшетов с жидким дизайном - PullRequest
Новая
       29

ориентация экрана для нескольких планшетов с жидким дизайном

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

Итак, я делаю мобильное веб-приложение, которое должно занимать 100% экрана без прокрутки (в любом направлении).

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

    html, body{
    height: 100%;   
    margin: 0;
    padding: 0;
    width: 100%;
}

.site-header{
    position: fixed;
    top: 0px;
    height: 10%;    
    background: red;
    width: 100%;
}

.site-article{
    position: fixed;
    top: 10%;
    bottom: 10%;    
    background: white;
    width: 95%;
}

.site-footer{
    position: fixed;
    bottom: 0px;
    height: 10%;    
    background: blue;
    width: 100%;
}

.site-nav{
    position: fixed;
    top: 10%;
    bottom: 10%;
    right: 0px;
    background: green;
    width: 5%;
}

Я знаю, что для css существуют медиа-запросы, подобные следующим 

 @media only screen and (orientation:portrait)

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

Он правильно отображается на моем ipad, затем вы меняете ориентацию и необходима прокрутка (как по горизонтали, так и по вертикали). Если я сохраню ориентацию и обновлю страницу, она загружает страницу с правильными позициями.

Есть ли в любом случае сделать это с помощью медиа-запросов с css или мне придется погрузиться в какой-нибудь javascript? Мне нужно иметь возможность поддерживать несколько мобильных устройств, от телефонов и планшетов Android до телефонов и планшетов IOS.

1 Ответ

0 голосов
/ 31 декабря 2011

Просто к вашему сведению.Высота 100% распространяется только на нижнюю часть области просмотра.В любом случае, вместо использования ориентации попробуйте использовать медиазапросы min-width и min-height.И установить разные точки останова для разных разрешений. 

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
...