html - CSS @media 选项无法正常工作

Question

我正在尝试实现 CSS @media 选项，但遇到了一些问题。我有三个选项，横向、纵向和移动。手机只能垂直激活，但水平不激活（基本上得到横向选项）。

这是CSS：

@media (orientation:landscape) {
/* some css */
}

@media (orientation:portrait) {
/* some more css */
}

@media mobile {
/* more css */
/* basically the same as vertical */
}

我该如何正确地做到这一点？我希望我的移动选项与我的肖像选项相同。

Answer 1

您可以尝试以下操作：

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

对于移动屏幕，我认为您需要像这样定义最小分辨率：

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

Answer 2

你不见了screen and...

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}

/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

iPhone 通常会扩展网站，因此您还需要此元标记：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

对于运行 4.0 之前版本的 iPhone，您可以使用以下

/* Portrait */
@media screen and (max-width: 320px) {
    /* Portrait styles */
}

/* Landscape */
@media screen and (min-width: 321px) and (max-width: 480px) {
    /* Landscape styles */
}