پشتیبانی از صفحه نمایش های مختلف در برنامه های وب

از آنجایی که اندروید در دستگاه هایی با اندازه های مختلف صفحه نمایش و تراکم پیکسلی موجود است، این عوامل را در طراحی وب خود در نظر بگیرید تا صفحات شما اندازه مناسبی داشته باشند. WebView از ویژگی‌های DOM، CSS و متا تگ پشتیبانی می‌کند تا به شما کمک کند محتوای وب خود را به درستی ارائه دهید.

هنگام هدف قرار دادن صفحات وب خود برای دستگاه های مجهز به اندروید، دو عامل اصلی وجود دارد که باید در نظر گرفته شوند:

درگاه دید
Viewport ناحیه مستطیلی است که یک منطقه قابل ترسیم برای صفحه وب شما فراهم می کند. شما می توانید چندین ویژگی Viewport مانند اندازه و مقیاس اولیه آن را مشخص کنید. مهمتر از همه، عرض درگاه دید است که تعداد کل پیکسل های افقی موجود از نقطه نظر صفحه وب را مشخص می کند – تعداد پیکسل های CSS موجود.
تراکم صفحه نمایش
کلاس WebView و اکثر مرورگرهای وب در اندروید، مقادیر پیکسل CSS شما را به مقادیر پیکسل مستقل از چگالی تبدیل می کنند، بنابراین صفحه وب شما در اندازه قابل درک یک صفحه نمایش با چگالی متوسط ​​- حدود 160 نقطه در اینچ - ظاهر می شود. با این حال، اگر گرافیک یک عنصر مهم در طراحی وب شما است، به مقیاس بندی که در تراکم های مختلف رخ می دهد توجه کنید. به عنوان مثال، تصویری با عرض 300 پیکسل در صفحه نمایش 320 نقطه در اینچ، بزرگ‌تر می‌شود—از پیکسل‌های فیزیکی بیشتری در هر پیکسل CSS استفاده می‌کند. این می تواند مصنوعاتی مانند تاری و پیکسل شدن ایجاد کند. برای سادگی، اندروید اکثر تراکم های صفحه نمایش کوچکتر را به چند دسته کلی تقسیم می کند: کوچک، متوسط ​​و بزرگ. برای کسب اطلاعات بیشتر درباره تراکم صفحه، پشتیبانی از تراکم پیکسلی مختلف را بخوانید.

به منابع مرتبط زیر مراجعه کنید:

ویژگی های viewport را مشخص کنید

Viewport ناحیه ای است که صفحه وب شما در آن کشیده شده است. اگرچه کل ناحیه قابل مشاهده درگاه نمایش با اندازه صفحه نمایش در صورت بزرگنمایی کامل مطابقت دارد، درگاه دید ابعاد پیکسلی خاص خود را دارد که در دسترس یک صفحه وب قرار می دهد. به عنوان مثال، اگرچه صفحه نمایش دستگاه ممکن است دارای عرض فیزیکی 480 پیکسل باشد، درگاه دید می تواند عرض 800 پیکسل داشته باشد. این به صفحه وب طراحی شده با عرض 800 پیکسل اجازه می دهد تا زمانی که مقیاس دید در 1.0 باشد، کاملاً روی صفحه قابل مشاهده باشد.

اکثر مرورگرهای وب در اندروید - از جمله کروم - به طور پیش‌فرض درگاه نمایش را روی اندازه بزرگ تنظیم می‌کنند. این _wide viewport mode_ حدود 980 پیکسل عرض دارد. بسیاری از مرورگرها نیز تا آنجایی که ممکن است به صورت پیش‌فرض کوچک‌نمایی می‌کنند تا عرض نمای کامل را نشان دهند که به نام _overview mode شناخته می‌شود.

با استفاده از تگ <meta name="viewport" ...> در سند خود <head> ، می توانید ویژگی های viewport را برای صفحه وب خود، مانند عرض و سطح بزرگنمایی اولیه تعریف کنید.

نحو زیر تمام ویژگی های viewport پشتیبانی شده و انواع مقادیر پذیرفته شده توسط هر یک را نشان می دهد:

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

به عنوان مثال، تگ <meta> زیر مشخص می‌کند که عرض درگاه نمایش با عرض صفحه نمایش دستگاه مطابقت دارد و توانایی بزرگ‌نمایی غیرفعال است:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

هنگام بهینه‌سازی سایت خود برای دستگاه‌های تلفن همراه، معمولاً عرض را روی "device-width" تنظیم می‌کنید تا اندازه دقیقاً در همه دستگاه‌ها متناسب باشد، سپس از پرس‌وجوهای رسانه‌ای CSS برای تطبیق انعطاف‌پذیر طرح‌بندی‌ها با اندازه‌های مختلف صفحه استفاده کنید.

تراکم دستگاه را با CSS هدف قرار دهید

WebView از -webkit-device-pixel-ratio پشتیبانی می کند، که یک ویژگی رسانه ای CSS است که به شما امکان می دهد سبک هایی را برای تراکم صفحه نمایش خاص ایجاد کنید. مقداری که برای این ویژگی اعمال می‌کنید باید 0.75، 1 یا 1.5 باشد تا نشان دهد که سبک‌ها به ترتیب برای دستگاه‌هایی با صفحه‌نمایش کم، متوسط ​​یا بالا هستند.

برای هر چگالی می توانید شیوه نامه های جداگانه ایجاد کنید:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

یا سبک های مختلف را در یک شیوه نامه مشخص کنید:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

برای اطلاعات بیشتر در مورد مدیریت تراکم های مختلف صفحه، به ویژه تصاویر، به تصاویر با DPI بالا برای تراکم پیکسل های متغیر مراجعه کنید.

تراکم دستگاه را با جاوا اسکریپت هدف قرار دهید

WebView از window.devicePixelRatio پشتیبانی می کند که یک ویژگی DOM است که به شما امکان می دهد چگالی دستگاه فعلی را جستجو کنید. مقدار این ویژگی ضریب مقیاس مورد استفاده برای دستگاه فعلی را مشخص می کند. اگر مقدار window.devicePixelRatio 1.0 باشد، دستگاه یک دستگاه با چگالی متوسط ​​در نظر گرفته می شود و به طور پیش فرض هیچ مقیاسی اعمال نمی شود. اگر مقدار 1.5 باشد، دستگاه یک دستگاه با چگالی بالا در نظر گرفته می شود و صفحه به طور پیش فرض 1.5 برابر مقیاس می شود. اگر مقدار 0.75 باشد، دستگاه یک دستگاه با چگالی کم در نظر گرفته می شود و صفحه به طور پیش فرض 0.75 برابر مقیاس می شود.

مقیاس بندی که مرورگر اندروید و WebView اعمال می کنند بر اساس تراکم هدف صفحه وب است. همانطور که در بخش تعریف چگالی هدف درگاه نمایش توضیح داده شد، هدف پیش‌فرض چگالی متوسط ​​است، اما می‌توانید هدف را تغییر دهید تا بر نحوه مقیاس‌بندی صفحه وب شما برای تراکم‌های مختلف صفحه تأثیر بگذارد.

به عنوان مثال، چگونه می توانید چگالی دستگاه را با جاوا اسکریپت جستجو کنید:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}