具有流体设计的多个平板电脑的屏幕方向 [英] screen orientation for multiple tablets with fluid design

问题描述

所以我正在制作一个移动网络应用程序，它应该占据屏幕的 100% 而不滚动(在任一方向).

So i'm making a mobile web application that is supposed to take up a 100% of the screen without scrolling (in either direction).

我对屏幕的不同区域有固定的位置.

I have fixed positions for the different area's of the screen.

    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 媒体查询

I know there are media queries for css like the following

 @media only screen and (orientation:portrait)

在哪里可以在纵向和横向之间切换方向，但我想不出可以在两个方向之间放置什么，因为宽度和高度都需要保持 100% 才能正确?

Where you can switch the orientation between portrait and landscape, but I can't think of anything to put between the two orientations as the width and height both need to stay 100% for each correct?

它在我的 ipad 上正确显示，然后您更改方向并需要滚动(水平和垂直).如果我保持方向并刷新页面，它会以正确的位置加载页面.

It displays correctly on my ipad, then you change the orientation and scrolling is needed (both horizontally and vertically). If I keep the orientation and refresh the page, it loads the page with the correct positions.

无论如何都可以使用带有 css 的媒体查询来做到这一点，还是我将不得不深入研究一些 javascript?我需要能够支持多种移动设备，从 Android 手机和平板电脑到 ios 手机和平板电脑.

Is there anyway to do this using media queries with css or am I going to have to dive into some javascript? I need to be able to support multiple mobile devices, from android phones and tablets to ios phones and tablets.

推荐答案

仅供参考.高度 100% 仅延伸到视口的底部.无论如何，不​​要使用方向尝试使用 min-width 和 min-height 媒体查询.并针对不同的分辨率设置不同的断点.

Just FYI. Height 100% only extends to the bottom of the viewport. Anyways, instead of using orientation try using min-width and min-height media queries. And set up different break points for different resolutions.

/* 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 */
}

这篇关于具有流体设计的多个平板电脑的屏幕方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！