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一起使用，我猜我第一次犯了错误，这就是我改变它的原因。

CSS响应式设备定位问题

3 个答案: