Why media queries are ignored when touch mode is enabled?-CodePudding

I have worked with media queries when I was creating simple sites with vanilla JS, but today I did it using React JS, IDK if it is problem or not.. Whenever site is responding on screen like mobile or any screen with touch stuff media queries are simple ignored like I have never wrote them.. for ex: If I will turn off touch simulation everything is fine.

I have tried to change media all to media screen and stuff like this but none of them have worked..

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

CodePudding user response：

Your media queries don't work on mobile because you haven't set the viewport width to device width

Try adding the following to the <head> of your index.html

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