Tasarımınız bir mobil cihazda görüntülendiğinde düğme veya bağlantı gibi etkileşimli öğelerin yeterince büyük olduğundan emin olmalısınız. ve etraflarında yeterli boşluk olması, Böylece, yanlışlıkla başka öğelerle üst üste binmeden kolayca bastırabilirsiniz. Bu, tüm kullanıcılara, özellikle de motor güçlüğü çekenler için faydalıdır.
Önerilen minimum dokunma hedefi boyutu, cihazdan bağımsız olarak yaklaşık 48 pikseldir bir web sitesini ziyaret edin. Örneğin, bir simgenin genişliği ve yüksekliği yalnızca 24 pikselken, dokunma hedefi boyutunu 48 piksele çıkarmak için ek dolgu kullanabilirsiniz. 48x48 piksel alanı yaklaşık 9 mm'ye karşılık gelir. Kişinin parmak ucu alanı büyüklüğünde.
Demoda, tüm bağlantıların minimum boyuta uyduğundan emin olmak için bunlara dolgu ekledim.
Dokunma hedefleri, birbirinden yaklaşık 8 piksel uzakta olmalıdır. hem yatay hem de dikey olarak kullanıcının parmağının bir dokunma hedefine bastıran parmağının yanlışlıkla başka bir hafifçe vurma hedefine dokunmaması için.
Dokunma hedeflerinizi test etme
Hedefiniz metinse ve metni ve dolguları boyutlandırmak için em veya rem gibi göreli değerler kullandıysanız
bu alanın hesaplanan değerinin yeterince büyük olup olmadığını kontrol etmek için Geliştirici Araçları'nı kullanabilirsiniz.
Aşağıdaki örnekte metnim ve dolgum için em kullanıyorum.
Bağlantının a bölümünü inceleyin.
Chrome Geliştirici Araçları'nda, kutunun çeşitli bölümlerini inceleyebileceğiniz Hesaplanan bölmesine geçin
ve hangi piksel boyutuna dönüştüklerini
görebilirsiniz.
Firefox Geliştirici Araçları'nda bir Düzen Paneli bulunur.
Bu panelde, incelenen öğenin gerçek boyutunu görürsünüz.
Dokunmatik ekran kullanımını algılamak için medya sorguları kullanma
Yalnızca görüntü alanı boyutlarını test edip küçük boyutların ise telefon veya tablet olma ihtimalinin yüksek olduğunu hem de artık bu karmaşık düzene uyum sağlamanın gerçek cihaz yeteneklerine dayalı olarak yeniden tasarladık.
Artık medya sorgularıyla test edebileceğimiz medya özelliklerinden biri
kullanıcının birincil girişinin dokunmatik ekran (pointer) olup olmadığı ve
algılanan girişlerden herhangi birinin dokunmatik ekran (any-pointer) olup olmadığını kontrol eder.
pointer ve any-pointer özellikleri fine veya coarse döndürür.
Fare veya dokunmatik yüzey kullanan biri ayrıntılı bir işaretçidir.
bile olsa söz konusu fare Bluetooth aracılığıyla bir telefona bağlı olsa bile.
coarse işaretçisi, dokunmatik ekranı belirtir.
Bu bir mobil cihaz, ancak dizüstü bilgisayar ekranı veya büyük tablet de olabilir.
Dokunma hedefini artırmak için bir medya sorgusu içinde CSS'nizi ayarlıyorsanız test etmek, tüm dokunmatik ekran kullanıcıları için dokunma hedeflerini artırmanızı sağlar. Bu şekilde, cihazın telefon veya daha büyük olmasına bakılmaksızın dokunma alanı daha geniş olur.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
İşaretçi gibi etkileşim medyası özellikleri hakkında daha fazla bilgi başlıklı makaledeki Duyarlı web tasarımıyla ilgili temel bilgiler başlıklı makaleyi inceleyin.