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

Question

我在使用普通 JS 创建简单网站时使用过媒体查询，但今天我使用 React JS、IDK（无论是否有问题）来完成它。无论何时网站在手机或任何屏幕等屏幕上响应带有触摸内容的媒体查询很容易被忽略，就像我从未写过它们一样。例如：如果我关闭触摸模拟，一切都很好。

我曾尝试将所有媒体更改为媒体屏幕和类似的内容，但 none 成功了..

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

您的媒体查询在移动设备上不起作用，因为您尚未将视口宽度设置为设备宽度

尝试将以下内容添加到 index.html

的 <head>

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

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

Why media queries are ignored when touch mode is enabled?

css

media-queries

responsive-design

reactjs