Web Sitelerinde Akıllı Telefon Yeteneği Nasıl Etkinleştirilir

Apple iPhone'un piyasaya sunulmasından bu yana mobil cihazlar üzerinden internet kullanımı artıyor. Farklı mobil cihazların ekran boyutları ve dokunmatik ekran arayüzleri nedeniyle, web siteleri bir mobil cihazda, bilgisayar ekranında göründüğü veya işlev gördüğü gibi görünmez veya çalışmaz. Okuyucuyu korumak için, basamaklı stil sayfalarını kullanarak web sitenizin bir akıllı telefon sürümünü oluşturun.

Akıllı Telefon Tarama Sınırlamaları

Akıllı telefonlarda gezinme, bilgisayar tabanlı gezinmeden iki önemli şekilde farklılık gösterir. İlk olarak, bir akıllı telefondaki mevcut ekran boyutu, bilgisayardaki ekrandan çok daha küçüktür; bu, bazı web sitelerinin dağınık veya bazı durumlarda bir akıllı telefonda okunamadığı anlamına gelir. Bir akıllı telefon kullanıcısının, bilgisayar görüntüleme için optimize edilmiş bir web sitesinde aşağı kaydırması veya yakınlaştırması gerekir. İkincisi, akıllı telefonlar imleç hareketi yerine dokunma tıklamalarına yanıt verir ve bu nedenle imleç hareketine göre değişen web sitesi öğeleri akıllı telefonlarda sorunlu olabilir. Örneğin, imleç üzerlerine geldiğinde değişen öğeler, bir akıllı telefonda istenen şekilde davranmaz; çünkü bir akıllı telefon üzerinde asılı durma hiçbir şey yapmaz. Ayrıca, açılır menüler bazı akıllı telefon kullanıcıları için sorunlu olabilir.

CSS Göreceli Boyutları

Web sitenizdeki belirli öğelerin boyutunu değiştiriyorsanız, yalnızca sitenizin CSS dosyasını değiştirmeniz gerekir. Akıllı telefonun okunabilirliği için CSS boyutlarınızı ve yazı tipi boyutlarınızı mutlak birimler yerine ilgili birimlerle değiştirin. Örneğin, belirli öğelerin genişlik ve yüksekliği piksel yerine yüzde cinsinden verilmelidir. Bu, tarayıcı penceresinin veya ana öğenin yüzdesine göre öğeleri boyutlandıracaktır. Yazı tipi boyutları için piksel yerine ems kullanın. Bir em, geçerli yazı tipi boyutuna piksel cinsinden eşittir. Bu nedenle, iki em, geçerli yazı tipi boyutunun iki katıdır, vb. Bu değişiklikler ayrı bir CSS dosyasına kaydedilmelidir.

CSS Ekran Özellikleri

Bir öğeyi sitenizden tamamen gizlemek için, o öğenin CSS stiline "display: none" özelliğini ekleyin. "Display: none" özelliği, bir öğeyi tamamen gizler, böylece pencerede yer almaz. Bunu, açılır menüler veya çok fazla ekran alanı kaplayan görüntüler gibi öğelerde kullanın. Bu, web sitenizin diğer öğelerinin, pencerede gizli öğe hiç orada bulunmamış gibi düzenlenmesine olanak tanır. Bu değişikliği kullanırsanız, gizli öğeden gelen önemli bilgilerin sayfanızda başka bir yerde göründüğünden emin olun.

Tarayıcıyı Yeniden Yönlendirme

Bir cihaz bir web sitesine eriştiğinde, önce HTML belgesinin bölümünü okur. Bir belgenin bölümündeki birden fazla CSS stil sayfasına bağlanabilirsiniz. Bir mobil cihaz web sitenizi yüklerse, tarayıcı varsayılan stil sayfası yerine media = "handheld" özniteliği tarafından tanımlanan stil sayfasını yükler. Tarayıcıyı, ekran boyutuna bağlı olarak farklı stil sayfalarına da yönlendirebilirsiniz. Web sitenizi farklı mobil aygıtlar için farklı şekillendirmek istiyorsanız bu yararlı olabilir. Yaygın akıllı telefon ekranı boyutlarının listesi için Kaynaklar bölümüne bakın.

Alternatif HTML

Sitenizin düzenini ve düzenini yeni bir CSS dosyasının ötesinde büyük ölçüde değiştiriyorsanız, istediğiniz değişiklikleri içeren yeni bir HTML dosyası oluşturmak isteyebilirsiniz. Farklı bir HTML dosyası oluşturursanız, kullanıcı siteyi bir akıllı telefonda görüntülüyorsa tarayıcıyı yeni HTML dosyasına yönlendirmeniz gerekir. Mobil tarayıcıyı tespit etmeye ek olarak, alternatif HTML sayfanıza yönlendirmek için komut dosyasını da değiştirmeniz gerekir. Mobil tarayıcı algılamak için komut dosyalarına bağlantı için Kaynaklar bölümüne bakın.