Mobil cihazlar için web sayfaları ve uygulamalar geliştirmek, web tarayıcıları için bir web sayfası geliştirmek üzere tasarlandı. Aşağıdaki uygulamalar, Android ve diğer mobil cihazlar için en etkili web uygulamasıdır.
- Mobil cihazları web sitenizin özel bir mobil sürümüne yönlendirin. Birkaç tane bunu sunucu tarafı yönlendirmeler kullanarak yapmanın en iyi yolu. Yaygın olarak kullanılan yöntemlerden biri "the" Web tarayıcısı tarafından sağlanan User Agent dizesi. Belirleyebilmek için sitenizin mobil sürümünü sunup sunmayacağınıza karar verirken "mobil" dizesidir.
- HTML5 kullanın
yeniden hedefleme
kampanyaları için kullanılabilir. HTML5, mobil web siteleri için en yaygın olarak kullanılan biçimlendirme dilidir.
Bu standart, web sitelerinin çeşitli alanlarda çalışmasını sağlamak için mobil öncelikli geliştirmeyi teşvik eder
cihazlar. Önceki web dillerinin aksine, HTML5 daha basit
<DOCTYPE>
vecharset
beyan:<!DOCTYPE html> ... <meta charset="UTF-8">
- Web sayfanızı doğru şekilde yeniden boyutlandırmak için görüntü alanı meta verilerini kullanın. Dokümanınızda
<head>
, tarayıcının görüntü alanının nasıl görünmesini istediğinizi belirten meta veriler sağlayın. oluşturmak için kullanabilirsiniz. Örneğin, görüntü alanı meta verileriniz, ilk sayfa ölçeğini ve hedef ekran yoğunluğunu belirler.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 verilerini kullanma hakkında daha fazla bilgi için Web uygulamalarında farklı ekranları destekleme başlıklı makaleyi inceleyin.
- Dikey doğrusal bir düzen kullanın. Kaydırırken kullanıcının ekranı sola veya sağa kaydırması sayfanızda gezinmeye devam edebilirsiniz. Yukarı ve aşağı kaydırmak kullanıcı için daha kolaydır ve sayfanızı basitleştirir.
- Düzen yüksekliğini ve genişliğini
match_parent
olarak ayarlayın.WebView
nesnenin yüksekliğini ve genişliğinimatch_parent
, uygulamanızın görünümlerinin doğru boyutlandırılmasını sağlar. Bu nedenle, yüksekliğiwrap_content
olarak ayarlamamanız gerekir. Benzer şekilde, düzen genişliğininwrap_content
olarak desteklenmediğini veWebView
metriğinin üst öğesinin genişliğini kullanın. Bu davranış nedeniyle, sistem gereksinimlerininWebView
nesnenizin üst düzen nesnesinin yüksekliği ve genişliğiwrap_content
. - Birden fazla dosya isteğinde bulunmaktan kaçının. Çünkü mobil cihazların genellikle bağlantı hızı vardır
masaüstü bilgisayarlardan daha yavaşsa sayfanızın mümkün olduğunca hızlı yüklenmesini sağlayın. Bu süreci hızlandırmanın bir yolu da
<head>
içinde stil sayfaları ve komut dosyası gibi fazladan dosyalar yüklemekten kaçının. Ayrıca şunları da göz önünde bulundurun: Google ile mobil analiz Google'ın PageSpeed Insights aracını kullanarak uygulamanıza özel ayrıntılı optimizasyon önerileri alabilirsiniz.
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
- Mobil Web En İyi Uygulamaları
- Web'i Daha Hızlı Hale Getirin