بهترین روش ها برای برنامه های وب

توسعه صفحات وب و برنامه های کاربردی برای دستگاه های تلفن همراه در مقایسه با توسعه یک صفحه وب برای مرورگرهای وب دسکتاپ چالش های متفاوتی را به همراه دارد. روش‌های زیر می‌توانند به شما در ارائه مؤثرترین برنامه وب برای اندروید و سایر دستگاه‌های تلفن همراه کمک کنند.

  1. دستگاه های تلفن همراه را به نسخه موبایل اختصاصی وب سایت خود هدایت کنید. راه های مختلفی برای انجام این کار با استفاده از تغییر مسیر سمت سرور وجود دارد. یکی از روش‌های متداول این است که رشته User Agent ارائه‌شده توسط مرورگر وب را «خرید» کنید. برای تعیین اینکه آیا باید نسخه موبایلی سایت خود را ارائه دهید یا خیر، به دنبال رشته "موبایل" در User Agent بگردید.
  2. از HTML5 برای دستگاه های تلفن همراه استفاده کنید. HTML5 رایج ترین زبان نشانه گذاری مورد استفاده برای وب سایت های تلفن همراه است. این استاندارد توسعه موبایل اول را تشویق می کند تا اطمینان حاصل شود که وب سایت ها بر روی دستگاه های مختلف کار می کنند. برخلاف زبان‌های وب قبلی، HTML5 از <DOCTYPE> ساده‌تر و اعلان‌های charset استفاده می‌کند:
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. برای تغییر اندازه مناسب صفحه وب خود از ابرداده viewport استفاده کنید. در سند <head> خود، ابرداده ای ارائه دهید که مشخص می کند می خواهید نمای مرورگر چگونه صفحه وب شما را ارائه کند. به عنوان مثال، ابرداده Viewport شما می تواند ارتفاع و عرض نمای مرورگر، مقیاس صفحه اولیه و تراکم صفحه هدف را مشخص کند.

    مثال زیر نحوه تنظیم ابرداده viewport را نشان می دهد:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    برای اطلاعات بیشتر در مورد نحوه استفاده از ابرداده Viewport برای دستگاه‌های مجهز به Android، پشتیبانی از صفحات مختلف در برنامه‌های وب را بخوانید.

  4. از یک طرح خطی عمودی استفاده کنید. در حین پیمایش در صفحه شما از اسکرول کردن به چپ و راست توسط کاربر خودداری کنید. اسکرول کردن به بالا و پایین برای کاربر آسان تر است و صفحه شما را ساده تر می کند.
  5. ارتفاع و عرض طرح را روی match_parent تنظیم کنید. تنظیم ارتفاع و عرض آبجکت WebView روی match_parent باعث می‌شود که اندازه نماهای برنامه شما به درستی باشد. ما از تنظیم ارتفاع روی wrap_content خودداری می کنیم زیرا باعث اندازه گیری نادرست می شود. به طور مشابه، تنظیم عرض طرح‌بندی روی wrap_content پشتیبانی نمی‌شود و باعث می‌شود WebView شما از عرض والد خود استفاده کند. به دلیل این رفتار، همچنین مهم است که مطمئن شوید هیچ یک از اشیاء طرح‌بندی والد شی WebView شما ارتفاع و عرض خود را روی wrap_content تنظیم نکرده باشند.
  6. از درخواست چندین فایل خودداری کنید. از آنجایی که دستگاه های تلفن همراه معمولاً سرعت اتصال کمتری نسبت به رایانه های رومیزی دارند، صفحه خود را تا حد امکان سریع بارگذاری کنید. یکی از راه‌های افزایش سرعت این است که از بارگیری فایل‌های اضافی مانند شیوه نامه و فایل‌های اسکریپت در <head> خودداری کنید. همچنین، برای پیشنهادات بهینه سازی دقیق برای برنامه خود ، تجزیه و تحلیل تلفن همراه را با PageSpeed ​​Insights Google انجام دهید .

منابع اضافی