IE11, Sfari 4.0, FF3.0, Opea9.0 ignore @media and displays "yellow" box

青=toruch screen

赤=pointer screen

黄="@media" ignored

@media (hover: hover) {
    /* ... */
}
if the primary input mechanism system of the device can hover over elements with ease, we use hover 
@media (hover: none) {
    /* ... */
}
if the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none

Media query to detect if device is touchscreen