CSS響應設備方向問題

Question

我正在通過phonegap開發一個應用程序，並且正在使用CSS使其具有響應能力。 一切正常，但是在某些情況下，我想根據設備的方向使用一些設置。 我沒有最后一個經驗，所以我認為我做錯了什么。

下面的代碼有效（它不是基於設備方向的）。

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 600px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 600px),
only screen and (     -o-min-device-pixel-ratio: 2)      and (min-width: 600px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 600px),
only screen and (                min-resolution: 192dpi) and (min-width: 600px),
only screen and (                min-resolution: 2dppx)  and (min-width: 600px) { 
/* my styling here */
}

下面的代碼不起作用（它基於設備方向，我想這是錯誤的）。 當我使用此樣式時，它根本沒有樣式。

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (device-width: 600px) and (orientation: landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (device-width: 600px) and (orientation: landscape),
only screen and (     -o-min-device-pixel-ratio: 2)      and (device-width: 600px) and (orientation: landscape),
only screen and (        min-device-pixel-ratio: 2)      and (device-width: 600px) and (orientation: landscape),
only screen and (                min-resolution: 192dpi) and (device-width: 600px) and (orientation: landscape),
only screen and (                min-resolution: 2dppx)  and (device-width: 600px) { 
/* my styling here */
}

Answer 1

如果我正確理解了您的需求，則以下代碼片段應該可以正常使用。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

要么

@media all and (orientation:portrait) {
  /* Styles for Portrait screen */
}
@media all and (orientation:landscape) {
  /* Styles for Landscape screen */
}

可以在以下網址找到： http : //www.hongkiat.com/blog/css-orientation-styles/

Answer 2

您可以基於長寬比來固定視圖，而不是基於方向來固定視圖。

您可以使用PhoneGap提供的默認CSS樣式來實現：

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

我建議您從“ Hello world”應用程序開始，並繼續開發其結構。

Answer 3

畢竟它是使用min-width而不是device-width起作用的，我想我是第一次犯錯了，這就是為什么我更改了它。