Css ile Mobil Cihaz Tespiti

Merhaba bu gün sizlere css’de çokça kullandığımız :hover olayını mobile geldiğinde pasif olmasının çözümünü söyleyeceğim.

Yani css de artık js olmadan mobilden girildiğini algılayacak ve hover olayını mobilde de bariz bir şekilde görünecek

@media (hover: hover) {
    /* ... */
}

Yukarıda gördüğünüz gibi @media etiketini kullanarak hover ın mobile de kullanılabilir olduğunu gördünüz. İkinci bir özellik ise desktopta hover olanı mobilde etkisiz hale getirmek onuda aşağıdaki kod bloğu ile yapabilirsiniz

@media (hover: none) {
    /* ... */
}

Diğer bir özellik ise pointer özelliği, bu özelliği mobilde de değişik şekillerde gösterebilirsiniz. Aşağıdaki ince-kalın ve tamamen pointer özelliğini mobilde yok etme olaylarını gösteren kod bloklarını görebilirsiniz

@media (pointer: coarse) {
    /* ... */
}

@media (pointer: fine) {
    /* ... */
}

@media (pointer: none) {
    /* ... */
}

Peki gelelim bu iki özelliği mobil cihazlarda eşleştirme olaylarına

/* smartphones, touchscreens */@media (hover: none) and (pointer: coarse) {    /* ... */}

/* stylus-based screens */@media (hover: none) and (pointer: fine) {    /* ... */}

/* Nintendo Wii controller, Microsoft Kinect */@media (hover: hover) and (pointer: coarse) {    /* ... */}

/* mouse, touch pad */@media (hover: hover) and (pointer: fine) {    /* ... */}