为什么启用触摸模式时媒体查询会被忽略？

Question

当我使用 vanilla JS 创建简单的网站时，我曾经使用过媒体查询，但今天我使用 React JS 来完成它，如果有问题的话，IDK。每当网站在屏幕上响应时（例如移动设备或任何带有触摸内容的屏幕）媒体查询很容易被忽略，就像我从未写过它们一样。例如：如果我关闭触摸模拟，一切都很好。

我尝试将媒体全部更改为媒体屏幕之类的东西，但没有一个起作用。

// media queries width & height

@media (max-width: 810px) and (max-height: 1080px) {
    .platform {
        // width: 70%;
        height: 60%;
    }
}

@media (max-width: 768px) and (max-height: 1024px) {
    .platform {
        width: 80%;
        height: 70%;
    }
}

// media queries height

@media (max-height: 600px) {
    .platform {
        width: 100%;
        height: 100%;
    }
}
// media queries width

@media (max-width: 625px) {
    .platform {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 501px) {
    .title {
        font-size: 3rem;
    }

    .instructions {
        width: 25rem;
        font-size: 1.4rem;
    }

    .die-container {
        gap: 10px;
        width: 25rem;
    }

    .die-item {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 430px) {
    .title {
        font-size: 2.8rem;
    }

    .instructions {
        width: 23rem;
        font-size: 1.3rem;
    }

    .die-container {
        gap: 10px;
        width: 22rem;
    }
    .die-item {
        width: 62px;
        height: 62px;
    }
}

@media (max-width: 390px) {
    .title {
        font-size: 2.5rem;
    }

    .instructions {
        width: 20rem;
        font-size: 1.2rem;
    }

    .die-container {
        gap: 10px;
        width: 20rem;
    }
    .die-item {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 340px) {
    .instructions {
        width: 19rem;
        font-size: 1.1rem;
    }

    .die-container {
        gap: 10px;
        width: 19rem;
    }
    .die-item {
        width: 50px;
        height: 50px;
    }
    .roll-dice {
        width: 8rem;
    }
}

@media (max-width: 340px) {
    .instructions {
        width: 18rem;
        font-size: 1rem;
    }

    .die-container {
        gap: 10px;
        width: 18rem;
    }
    .die-item {
        width: 50px;
        height: 50px;
    }
    .roll-dice {
        width: 8rem;
    }
}

Answer 1

您的媒体查询无法在移动设备上工作，因为您没有将视口宽度设置为设备宽度

尝试将以下内容添加到的＆lt; head＆gt; index.html

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