I was writing a css that only applies to iOS.

When I searched, most people used '@support(-webkit-touch-callout:none)' to write css.

Touch callout is a menu that comes out when you press and hold the link on the iPhone.

But I wonder why I have to set it to 'none'.

Even if I wrote '@support(-webkit-touch-callout:inherit)' the css seemed to work well.

What happens if I don't set '@support(-webkit-touch-callout: none)'?

Please tell me anything related to this question.

Thank you.

`

#main {
        min-height: 100vh;
    }
    /* iOS only */
    @supports (-webkit-touch-callout: none) { 
        #main {
            min-height: -webkit-fill-available;
        }
    }

`