Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
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> ve
charset beyan:
<!DOCTYPEhtml>
...
<metacharset="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:
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ğini
match_parent, uygulamanızın görünümlerinin doğru boyutlandırılmasını sağlar. Bu nedenle,
yüksekliği wrap_content olarak ayarlamamanız gerekir. Benzer şekilde,
düzen genişliğinin wrap_content olarak desteklenmediğini ve WebView metriğinin
üst öğesinin genişliğini kullanın. Bu davranış nedeniyle, sistem gereksinimlerinin
WebView nesnenizin üst düzen nesnesinin yüksekliği ve genişliği
wrap_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.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[null,null,["Son güncelleme tarihi: 2025-07-27 UTC."],[],[],null,["# Best practices for web apps\n\nDeveloping web pages and applications for mobile devices presents different challenges compared\nto developing a web page for desktop web browsers. The following practices can help you provide the\nmost effective web application for Android and other mobile devices.\n\n1. **Redirect mobile devices to a dedicated mobile version of your website.** There are several ways to do this using server-side redirects. One common method is to \"sniff\" the User Agent string provided by the web browser. To determine whether to serve a mobile version of your site, look for the \"mobile\" string in the User Agent.\n| **Note:** Large-screen Android-powered devices that are served full-size websites---such as tablets---don't include the \"mobile\" string in the User Agent, while the rest of the User Agent string is mostly the same. As such, it's important you deliver the mobile version of your website based on whether the \"mobile\" string exists in the User Agent.\n2. **Use [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)\n for mobile devices.** HTML5 is the most common markup language used for mobile websites. This standard encourages mobile-first development to help ensure that websites work on a variety of devices. Unlike previous web languages, HTML5 uses simpler `\u003cDOCTYPE\u003e` and `charset` declarations: \n\n ```xml\n \u003c!DOCTYPE html\u003e\n ...\n \u003cmeta charset=\"UTF-8\"\u003e\n ```\n3. **Use viewport metadata to properly resize your web page.** In your document `\u003chead\u003e`, provide metadata that specifies how you want the browser's viewport to render your web page. For example, your viewport metadata can specify the height and width for the browser's viewport, the initial page scale, and the target screen density.\n\n The following example shows how to set viewport metadata: \n\n ```xml\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u003e\n ```\n\n For more information about how to use viewport metadata for Android-powered devices, read [Support different screens in web apps](/guide/webapps/targeting).\n4. **Use a vertical linear layout.** Avoid the need for the user to scroll left and right while navigating your page. Scrolling up and down is easier for the user and makes your page simpler.\n5. **Set the layout height and width to `match_parent`.** Setting your [`WebView`](/reference/android/webkit/WebView) object's height and width to `match_parent` makes sure your app's views are sized correctly. We discourage setting the height to `wrap_content` because it results in incorrect sizing. Similarly, setting the layout width to `wrap_content` isn't supported and causes your `WebView` to use the width of its parent instead. Because of this behavior, it's also important to make sure none of your `WebView` object's parent layout objects have their height and width set to `wrap_content`.\n6. **Avoid multiple file requests.** Because mobile devices typically have a connection speed slower than desktop computers, make your page load as fast as possible. One way to speed it up is to avoid loading extra files such as stylesheets and script files in the `\u003chead\u003e`. Also, consider [performing mobile analysis with\n Google's PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started) for detailed optimization suggestions specific to your app.\n\nAdditional resources\n--------------------\n\n- [Pixel-Perfect UI in the WebView](https://developers.google.com/chrome/mobile/docs/webview/pixelperfect)\n- [Learn Responsive Design](http://www.html5rocks.com/en/mobile/responsivedesign/)\n- [High DPI images for variable pixel densities](http://www.html5rocks.com/en/mobile/high-dpi/)\n- [Mobile Web Best Practices](http://www.w3.org/TR/mobile-bp/)\n- [Make the Web Faster](https://developers.google.com/speed/overview)"]]
