2013-03-12 28 views
11

Web sitemde bir bildirim çubuğu gösteriyorum ve açıkçası bir mobil cihazda iyi çalışmıyor. SADECE masaüstü kullanıcıları için çubuğu göstermek istiyorum.Kullanıcının mobil cihazda olup olmadığını belirlemenin en kolay yolu

Bir kullanıcının masaüstü veya mobil cihazlarda olup olmadığını belirlemenin en kolay yolu nedir? Kolayca İşte

CSS3 media queries iphone, android ve böğürtlen denetler bir örnektir istihdam olabilir gerçi

+4

Sana sözde yeteneği belirlemek için gerçek yeteneği yerine kullanıcı aracıları belirlemek için medya sorguları kullanmak gerektiğini düşünüyorum. –

+1

Gerçekten bir değil. Çalışmamalısınız * neden * işe yaramadı (hangi özellikler cep telefonları eksiktir) ve görüntülenip görüntülenmeyeceğini belirlemek için özellik tespiti ve medya sorguları kullanır. Cep telefonuyla masaüstünü tespit etmek yerine, – Chad

+0

, senaryoda, ekran çözünürlüğünü algılamanın daha mantıklı olduğunu düşünüyorum. – lbstr

cevap

6

Kontrol Javascript, jQuery vb

+0

Linkten verilen kod bir ASP.net web sitesinde benim için mükemmel çalışır. –

6

Bir kullanıcı aracısı onay, "en kolay" dır; Diğer mobil tarayıcıları kolayca ekleyebilirsiniz.

var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false; 
+0

Eh, aşağılamadım (artık kimsenin yapmadığı gibi görünüyor ...) ama normal ifadeniz biraz seyrek. – Pointy

+0

Yeterince adil, tüm mobil tarayıcıları kapsamaya çalışmıyorum, sadece nasıl yapılabileceğine dair bir örnek veriyordum. Sanırım bunu belirtmeliydim. –

+1

@Point çok. Örneğin, Windows Phone için denemedim. Belki de medya sorguları en iyisidir, çünkü her tarayıcı bir gün bunu uygular. –

7

için bu http://detectmobilebrowsers.com/

Çalışma Ben özellik algılama kullanmak en iyisidir bulmak. Bir dokunmatik cihaz olup olmadığını belirlemek için Modernizr kullanın. Sen gibi şeyler yapabiliriz:

var mousedown = 'mousedown'; 

if (Modernizr.touch) { 
    mousedown = 'touchstart'; 
} 

$('.foo').on(mousedown, handleMouseDown); 

Ve sonra ekran genişliğine işlemek için CSS Medya Sorguları kullanırsınız (ve javascript ile ekran genişliğine algılamak da kolaydır). Böylelikle dokunmatik ekranları büyük ekranlarla veya küçük ekranlı dokunmatik olmayan cihazlarla doğru şekilde işleyebilirsiniz.

+2

...ve CSS ile öğeleri gizleyebilir/gösterebilir/değiştirebilirsiniz: Modernizr, dokunmatik cihazlar için "" elemanına "dokunma" sınıfını ekler. Böylece, .touch #notificationBar {display: none; } '… ... – Pointy

0

modernizr kullanırsanız. Öğeye "no-touch" sınıfı eklenecektir. Çubuğu varsayılan olarak gizleyebilir ve "dokunma" sınıfı mevcutsa çubuğu göstermek için bir css kuralı ekleyebilirsiniz. Örnek:

varsayılan:

.bar{display:none;}

masaüstü:

.no-touch .bar{display:block;} 
+1

, artık mobil olarak kullanılmayan dokunmatik cihazlar olduğu için artık daha uygun olmayabilir -> bkz. Pro yüzey (mobil olması gereken bir tablet olabilir), lenovo gibi dokunmatik tabletler vb. Eminim yeni bir dizi dokunmatik cihaz gelecek – Daemedeor

İlgili konular