Mobil cihazlar için web sayfaları ve uygulamalar geliştirmek, masaüstü web tarayıcıları için bir web sayfası geliştirmekten farklı zorlukları beraberinde getirir. Aşağıdaki uygulamalar, Android ve diğer mobil cihazlar için en etkili web uygulamasını sağlamanıza yardımcı olabilir.
- Mobil cihazları web sitenizin özel bir mobil sürümüne yönlendirin. Sunucu tarafı yönlendirmeleri kullanarak bunu yapmanın birkaç yolu vardır. Yaygın olarak kullanılan bir yöntem, web tarayıcısının sağladığı Kullanıcı Aracısı dizesini "dinlemek"tir. Sitenizin mobil sürümünün sunulup sunulmayacağını belirlemek için Kullanıcı Aracısı'nda "mobile" dizesini arayın.
- Mobil cihazlar için
HTML5 kullanın. HTML5, mobil web sitelerinde kullanılan en yaygın biçimlendirme dilidir.
Bu standart, web sitelerinin çeşitli cihazlarda çalışmasını sağlamak için mobil öncelikli geliştirmeyi teşvik eder. Önceki web dillerinden farklı olarak HTML5 daha basit
<DOCTYPE>
vecharset
bildirimleri kullanır:<!DOCTYPE html> ... <meta charset="UTF-8">
- Web sayfanızı düzgün bir şekilde yeniden boyutlandırmak için görüntü alanı meta verilerini kullanın.
<head>
dokümanınızda, tarayıcının görüntü alanının web sayfanızı nasıl oluşturmasını istediğinizi belirten meta veriler sağlayın. Örneğin, görüntü alanı meta verileriniz, tarayıcının görüntü alanı için yükseklik ve genişliği, ilk sayfa ölçeğini ve hedef ekran yoğunluğunu belirtebilir.Aşağıdaki örnekte görüntü alanı meta verilerinin nasıl ayarlanacağı gösterilmektedir:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Android destekli cihazlarda görüntü alanı meta verilerinin nasıl kullanılacağı hakkında daha fazla bilgi için Web uygulamalarında farklı ekranları destekleme konusunu okuyun.
- Dikey doğrusal düzen kullanın. Kullanıcının sayfanızda gezinirken sola ve sağa kaydırması ihtiyacını ortadan kaldırın. Yukarı ve aşağı kaydırmak hem kullanıcılar için daha kolay hem de sayfanızı daha basit hale getirir.
- Düzen yüksekliğini ve genişliğini
match_parent
değerine ayarlayın.WebView
nesnenizin yüksekliğini ve genişliğinimatch_parent
olarak ayarlamak, uygulamanızın görünümlerinin doğru şekilde boyutlandırılmasını sağlar. Yanlış boyutlandırmayla sonuçlanacağı için yüksekliğinwrap_content
olarak ayarlanmasını önermiyoruz. Benzer şekilde, düzen genişliğininwrap_content
olarak ayarlanması desteklenmez veWebView
öğenizin, üst öğesinin genişliğini kullanmasına neden olur. Bu davranış nedeniyleWebView
nesnenizin üst düzen nesnelerinin hiçbirinin yüksekliği ve genişliğininwrap_content
olarak ayarlanmadığından emin olmanız da önemlidir. - Birden fazla dosya isteğinden kaçının. Mobil cihazların bağlantı hızı genellikle masaüstü bilgisayarlardan daha düşük olduğundan sayfanızın mümkün olduğunca hızlı yüklenmesini sağlayın. Bu süreci hızlandırmanın yollarından biri,
<head>
içine stil sayfaları ve komut dosyaları gibi ekstra dosyalar yüklemekten kaçınmaktır. Ayrıca, uygulamanıza özel ayrıntılı optimizasyon önerileri için Google'ın PageSpeed Insights aracıyla mobil analiz yapabilirsiniz.
Ek kaynaklar
- Web Görünümü'nde Pixel Perfect kullanıcı arayüzü
- Duyarlı Tasarımı Öğrenin
- Değişken piksel yoğunlukları için yüksek DPI resimler
- En İyi Mobil Web Uygulamaları
- Web'i Daha Hızlı Hale Getirin