Why doesn't responsiveness work on specific devices?

Question

Layout

Adaptively layout the site on localhost, when checking, I noticed a trick: the media query works at an arbitrary size without specifying the device:

But at the same time, if you specify an Ipad as the device, which has the same dimensions, the desired picture disappears abruptly :

The media query itself looks like this :

@media (max-width: 770px) {
        .main-box {
                display: block;
                text-align: center;
        }

        .index-moon {
                margin: 0;
        }

        .description {
                display: block;
        }

        h1 {
                text-align: center;
                margin: 0;
        }
}

I want to point out that the custom size was displaying the NON-Touch version, so somehow it works differently on touch devices.