با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
توسعه صفحات وب و برنامه های کاربردی برای دستگاه های تلفن همراه در مقایسه با توسعه یک صفحه وب برای مرورگرهای وب دسکتاپ چالش های متفاوتی را به همراه دارد. روش‌های زیر می‌توانند به شما در ارائه مؤثرترین برنامه وب برای اندروید و سایر دستگاه‌های تلفن همراه کمک کنند.
دستگاه های تلفن همراه را به نسخه موبایل اختصاصی وب سایت خود هدایت کنید. راه های مختلفی برای انجام این کار با استفاده از تغییر مسیر سمت سرور وجود دارد. یکی از روش‌های متداول این است که رشته User Agent ارائه‌شده توسط مرورگر وب را «خرید» کنید. برای تعیین اینکه آیا باید نسخه موبایلی سایت خود را ارائه دهید یا خیر، به دنبال رشته "موبایل" در User Agent بگردید.
از HTML5 برای دستگاه های تلفن همراه استفاده کنید. HTML5 رایج ترین زبان نشانه گذاری مورد استفاده برای وب سایت های تلفن همراه است. این استاندارد توسعه موبایل اول را تشویق می کند تا اطمینان حاصل شود که وب سایت ها بر روی دستگاه های مختلف کار می کنند. برخلاف زبان‌های وب قبلی، HTML5 از <DOCTYPE> ساده‌تر و اعلان‌های charset استفاده می‌کند:
<!DOCTYPEhtml>
...
<metacharset="UTF-8">
برای تغییر اندازه مناسب صفحه وب خود از ابرداده viewport استفاده کنید. در سند <head> خود، ابرداده ای ارائه دهید که مشخص می کند می خواهید نمای مرورگر چگونه صفحه وب شما را ارائه کند. به عنوان مثال، ابرداده Viewport شما می تواند ارتفاع و عرض نمای مرورگر، مقیاس صفحه اولیه و تراکم صفحه هدف را مشخص کند.
مثال زیر نحوه تنظیم ابرداده viewport را نشان می دهد:
از یک طرح خطی عمودی استفاده کنید. در حین پیمایش در صفحه شما از اسکرول کردن به چپ و راست توسط کاربر خودداری کنید. اسکرول کردن به بالا و پایین برای کاربر آسان تر است و صفحه شما را ساده تر می کند.
ارتفاع و عرض طرح را روی match_parent تنظیم کنید. تنظیم ارتفاع و عرض آبجکت WebView روی match_parent باعث می‌شود که اندازه نماهای برنامه شما به درستی باشد. ما از تنظیم ارتفاع روی wrap_content خودداری می کنیم زیرا باعث اندازه گیری نادرست می شود. به طور مشابه، تنظیم عرض طرح‌بندی روی wrap_content پشتیبانی نمی‌شود و باعث می‌شود WebView شما از عرض والد خود استفاده کند. به دلیل این رفتار، همچنین مهم است که مطمئن شوید هیچ یک از اشیاء طرح‌بندی والد شی WebView شما ارتفاع و عرض خود را روی wrap_content تنظیم نکرده باشند.
از درخواست چندین فایل خودداری کنید. از آنجایی که دستگاه های تلفن همراه معمولاً سرعت اتصال کمتری نسبت به رایانه های رومیزی دارند، صفحه خود را تا حد امکان سریع بارگذاری کنید. یکی از راه‌های افزایش سرعت این است که از بارگیری فایل‌های اضافی مانند شیوه نامه و فایل‌های اسکریپت در <head> خودداری کنید. همچنین، برای پیشنهادات بهینه سازی دقیق برای برنامه خود ، تجزیه و تحلیل تلفن همراه را با PageSpeed Insights Google انجام دهید .
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی."],[],[],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)"]]
