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

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

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

ناحیه نمایش

درگاه دید ناحیه مستطیلی است که ناحیه قابل‌رسمی برای صفحه وب شما فراهم می‌کند. می‌توانید چندین ویژگی درگاه دید را مشخص کنید، مثل اندازه و مقیاس اولیه آن. مهم‌ترین مورد عرض درگاه نمایش است که تعداد کل پیکسل‌های افقی دردسترس را از دیدگاه صفحه وب تعریف می‌کند—تعداد پیکسل‌های CSS دردسترس.

تراکم صفحه‌نمایش

کلاس WebView و اکثر مرورگرهای وب در Android مقادیر پیکسل CSS شما را به مقادیر پیکسل مستقل از تراکم تبدیل می‌کنند، بنابراین صفحه وب شما با همان اندازه قابل‌درک در صفحه نمایش با تراکم متوسط (حدود ۱۶۰ نقطه در اینچ) نمایش داده می‌شود. بااین‌حال، اگر گرافیک‌ها عنصر مهمی در طراحی وب شما هستند، به مقیاس‌بندی که در تراکم‌های مختلف رخ می‌دهد توجه کنید. برای مثال، تصویری که در صفحه‌نمایش ۳۲۰ نقطه در اینچ، ۳۰۰ پیکسل عرض دارد، بزرگ می‌شود—این تصویر از پیکسل‌های فیزیکی بیشتری در هر پیکسل CSS استفاده می‌کند. این کار می‌تواند باعث ایجاد آثار ساختاری مثل محو کردن و پیکسل‌بندی شود. برای ساده‌سازی، Android بیشتر تراکم‌های صفحه‌نمایش کوچک‌تر را در چند دسته کلی جمع می‌کند: کوچک، متوسط، و بزرگ. برای اطلاعات بیشتر درباره تراکم صفحه‌نمایش، پشتیبانی از تراکم‌های پیکسل مختلف را بخوانید.

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

• میانای کاربر Pixel-Perfect در «نمای وب»
• یادگیری طراحی واکنش‌گرا
• تصاویر DPI بالا برای تراکم‌های پیکسل متغیر

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

درگاه دید ناحیه‌ای است که صفحه وب شما در آن رسم می‌شود. اگرچه کل ناحیه نمایان درگاه دید با اندازه صفحه‌نمایش در حالت کاملاً زوم‌پس مطابقت دارد، درگاه دید ابعاد پیکسل خاص خود را دارد که دراختیار صفحه وب قرار می‌دهد. برای مثال، اگرچه صفحه‌نمایش دستگاه ممکن است عرض فیزیکی ۴۸۰ پیکسل داشته باشد، نمای درگاه می‌تواند عرض ۸۰۰ پیکسل داشته باشد. این کار باعث می‌شود صفحه وبی که با عرض ۸۰۰ پیکسل طراحی شده است وقتی مقیاس درگاه دید ۱٫۰ باشد کاملاً در صفحه‌نمایش قابل‌مشاهده باشد.

اکثر مرورگرهای وب در Android—ازجمله Chrome—به‌طور پیش‌فرض نمای دید را روی اندازه بزرگی تنظیم می‌کنند. این _حالت ناحیه نمایش عریض_ حدود ۹۸۰ پیکسل عرض دارد. بسیاری از مرورگرها به‌طور پیش‌فرض تا جایی که ممکن است کوچک‌نمایی می‌کنند تا کل عرض درگاه دید را نشان دهند، که به آن _حالت نمای کلی_ می‌گویند.

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

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

<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 است و به شما امکان می‌دهد برای تراکم‌های صفحه خاص سبک ایجاد کنید. مقدار اعمال‌شده برای این ویژگی باید ۰٫۷۵، ۱، یا ۱٫۵ باشد تا نشان دهد سبک‌ها به‌ترتیب برای دستگاه‌هایی با صفحه‌های کم‌تراکم، میان‌تراکم، یا پر‌تراکم هستند.

می‌توانید برگه‌های سبک جداگانه‌ای برای هر تراکم ایجاد کنید:

<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 برابر با ۱٫۰ باشد، دستگاه به‌عنوان دستگاه با تراکم متوسط درنظر گرفته می‌شود و به‌طور پیش‌فرض هیچ مقیاسی اعمال نمی‌شود. اگر مقدار ۱٫۵ باشد، دستگاه به‌عنوان دستگاه با تراکم بالا درنظر گرفته می‌شود و صفحه به‌طور پیش‌فرض ۱٫۵ برابر مقیاس‌بندی می‌شود. اگر مقدار ۰٫۷۵ باشد، دستگاه به‌عنوان دستگاه با تراکم پایین درنظر گرفته می‌شود و صفحه به‌طور پیش‌فرض ۰٫۷۵ برابر مقیاس‌بندی می‌شود.

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

برای مثال، در اینجا نحوه پُرسمان کردن تراکم دستگاه با JavaScript آمده است:

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");
}