Press "Enter" to skip to content

Css ile Mobil Cihaz Tespiti

Samet Ocak 0

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) {    /* ... */}

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir