Question

我正在使用以下媒体查询，因为这些恰好是断点：

@media only screen and (max-width: 1022px)
@media only screen and (max-width: 900px)
@media only screen and (max-width: 816px)
@media only screen and (max-width: 766px)
@media only screen and (max-width: 750px)
@media only screen and (max-width: 700px)
@media only screen and (max-width: 668px)

然而，在ipad或智能手机上（手机分辨率最大宽度为668px），它仍会显示通用css，但在浏览器上调整其正确显示的设备分辨率 - 我是否必须创建特定于设备的查询？

Answer 1

iPad的分辨率为1024x768像素，因此任何查询都不会成为目标。您应该使用max-width：

，而不是使用max-device-width

@media only screen and (max-device-width: 1022px)
@media only screen and (max-device-width: 900px)
@media only screen and (max-device-width: 816px)
@media only screen and (max-device-width: 766px)
@media only screen and (max-device-width: 750px)
@media only screen and (max-device-width: 700px)
@media only screen and (max-device-width: 668px)

Answer 2

@media only screen and（max-width：668px）and（min-width：xxxpx）

也需要设置最小宽度。

Answer 3

请使用head标记内的视口

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

Answer 4

在移动设备上，视口大小比桌面屏幕稍微复杂一些。默认情况下，它们基本上在“虚拟视口”中显示该站点，该站点在不同浏览器中在800-1000px之间变化，然后将其缩放以适合物理屏幕。请参阅Peter-Paul Koch撰写的经典文章：http://quirksmode.org/mobile/viewports2.html

Answer 5

像这样添加它将起作用：

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

供参考：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

CSS媒体查询不影响设备

5 个答案: