نمایش وب کامل پیکسل

تاریخ انتشار: 28 فوریه 2014

تعدادی گزینه وجود دارد که می توانید از آنها برای ایجاد رابط عالی برای WebView خود استفاده کنید.

متا تگ viewport را تنظیم کنید

متا تگ viewport یکی از مهمترین تگ هایی است که باید به برنامه وب خود اضافه کنید. بدون آن، WebView ممکن است طوری عمل کند که گویی سایت شما برای مرورگرهای دسکتاپ طراحی شده است. این باعث می شود به صفحه وب شما عرض بزرگتری داده شود (معمولاً 980 پیکسل) و آن را متناسب با عرض WebView تغییر دهد. در بیشتر موارد، این منجر به یک نسخه کلی کوچک از صفحه می‌شود که کاربر را ملزم می‌کند برای خواندن واقعی محتوا، حرکت و زوم کند.

اگر می خواهید عرض سایت شما 100% عرض WebView باشد، متا تگ viewport را تنظیم کنید:

<meta name="viewport" content="width=device-width, initial-scale=1">

عرض را روی مقدار ویژه دستگاه-width تنظیم کنید تا کنترل بیشتری بر طرح‌بندی صفحه داشته باشید.

به‌طور پیش‌فرض، WebView به‌جای پیش‌فرض کردن درگاه نمایش دسک‌تاپ، درگاه نمایش را روی «عرض دستگاه» تنظیم می‌کند. با این حال، برای رفتار قابل اعتماد و کنترل شده، استفاده از متا تگ viewport تمرین خوبی است.

نمایش سایت های دسکتاپ

در برخی موارد، ممکن است نیاز به نمایش محتوایی داشته باشید که برای دستگاه های تلفن همراه طراحی نشده است. برای مثال، ممکن است محتوایی را که کنترل نمی کنید نمایش دهید. در این مورد، می‌توانید WebView را مجبور کنید که از یک viewport در اندازه دسکتاپ استفاده کند:

• setUseWideViewPort(true)
• setLoadWithOverviewMode (درست)

اگر این روش‌ها تنظیم نشده باشند و هیچ پورت نمایشی مشخص نشده باشد، WebView تلاش می‌کند تا پهنای نمایش را بر اساس اندازه محتوا تنظیم کند.

علاوه بر این، ممکن است بخواهید از الگوریتم طرح بندی TEXT_AUTOSIZING استفاده کنید که اندازه فونت را افزایش می دهد تا آن را در دستگاه تلفن همراه خواناتر کند. setLayoutAlgorithm را ببینید.

از طراحی واکنش گرا استفاده کنید

طراحی واکنشگرا رویکردی برای طراحی یک رابط است که بر اساس اندازه صفحه نمایش تغییر می کند.

روش های مختلفی برای پیاده سازی طراحی واکنش گرا وجود دارد. یکی از رایج‌ترین پرسش‌های @media است که CSS را بر اساس ویژگی‌های دستگاه به عناصر اعمال می‌کند.

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

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

برای تغییر به طرح بندی افقی، ویژگی flex-direction را بر اساس جهت:

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

همچنین می توانید طرح بندی را بر اساس عرض صفحه تغییر دهید.

به عنوان مثال، تنظیم اندازه عرض دکمه از 100٪ به چیزی کوچکتر با بزرگتر شدن اندازه فیزیکی صفحه نمایش.

button {
  display: block;
  width: 100%;
  ...
}

@media screen and (min-width: 500px) {
  button {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  }
}

اینها تغییرات جزئی هستند، اما بسته به رابط کاربری شما، پرس و جوهای رسانه ای می توانند به شما کمک کنند تا در عین حال که HTML یکسانی داشته باشید، تغییرات بسیار بزرگتری در ظاهر برنامه خود ایجاد کنید.

نکته: سعی کنید رابط را بر اساس عرض تغییر دهید، زیرا یک مؤلفه شروع به ظاهر نامناسب می کند، به جای تمرکز بر اندازه دستگاه. این به برنامه شما کمک می‌کند در طیف وسیعی از دستگاه‌ها، نه فقط دستگاه‌هایی که روی آن‌ها تست می‌کنید، عالی به نظر برسد. می توانید این را در حالت DevToolsDevice تست کنید.

تصاویر واضح و واضح

تنوع اندازه و تراکم صفحه نمایش نیز چالش هایی را برای تصاویر ایجاد می کند. تصاویر کوچک‌تر به حافظه کمتری نیاز دارند و سریع‌تر بارگذاری می‌شوند، اما اگر آن‌ها را بزرگ کنید محو می‌شوند.

در اینجا چند نکته و ترفند وجود دارد تا مطمئن شوید تصاویر شما در هر صفحه‌ای واضح و شفاف به نظر می‌رسند:

• برای افکت های مقیاس پذیر از CSS استفاده کنید.
• از گرافیک برداری استفاده کنید.
• ارائه عکس های با وضوح بالا

برای افکت های مقیاس پذیر از CSS استفاده کنید

هر زمان که می توانید از CSS به جای تصاویر استفاده کنید. ممکن است برخی از ترکیب‌های ویژگی‌های CSS گران باشد. همیشه ترکیب های خاصی را که استفاده می کنید آزمایش کنید.

درباره First Contentful Paint (FCP) بیشتر بیاموزید، که زمان را از زمانی که کاربر برای اولین بار به صفحه پیمایش می کند تا زمانی که هر بخشی از محتوای صفحه روی صفحه نمایش داده می شود، اندازه گیری می کند. «محتوا» به متن، تصاویر (از جمله تصاویر پس‌زمینه)، عناصر <svg> و عناصر <canvas> غیرسفید اشاره دارد.

از گرافیک برداری استفاده کنید

گرافیک برداری مقیاس پذیر (SVG) یک راه عالی برای ارائه یک تصویر مقیاس پذیر است. برای تصاویری که با گرافیک برداری مناسب هستند، SVG تصاویری با کیفیت بالا با اندازه فایل بسیار کوچک ارائه می دهد.

عکس هایی با وضوح بالا ارائه دهید

از یک عکس مناسب برای یک دستگاه با DPI بالا استفاده کنید و تصویر را با استفاده از CSS مقیاس کنید. به این ترتیب، تصویر می تواند با کیفیت بالا در بین دستگاه ها ارائه شود. اگر هنگام تولید تصویر از فشرده سازی بالا (تنظیم کیفیت پایین) استفاده می کنید، ممکن است بتوانید با حجم فایل مناسب به نتایج بصری خوبی برسید.

این رویکرد چند جنبه منفی بالقوه دارد: تصاویر بسیار فشرده ممکن است برخی از مصنوعات بصری را نشان دهند، بنابراین باید آزمایش کنید تا تعیین کنید چه سطح فشرده‌سازی قابل قبولی است. و تغییر اندازه تصویر در CSS می تواند یک عملیات گران قیمت باشد.

اگر فشرده سازی بالا برای نیازهای شما مناسب نیست، فرمت WebP را امتحان کنید، که تصویری با کیفیت بالا با حجم فایل نسبتاً کوچک ارائه می دهد. فراموش نکنید که برای نسخه‌هایی از Android که WebP در آن‌ها پشتیبانی نمی‌شود، یک نسخه بازگشتی ارائه کنید.

کنترل ریز دانه

در بسیاری از موارد، نمی توانید از یک تصویر برای همه دستگاه ها استفاده کنید. در این صورت می توانید تصاویر مختلفی را بر اساس اندازه و تراکم صفحه انتخاب کنید. از پرس و جوهای رسانه ای برای انتخاب تصاویر پس زمینه بر اساس اندازه و چگالی صفحه استفاده کنید.

شما می توانید از جاوا اسکریپت برای کنترل نحوه بارگیری تصاویر استفاده کنید، اما این امر پیچیدگی را اضافه می کند.

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

برای انتخاب یک تصویر بر اساس تراکم صفحه، باید از واحدهای dpi یا dppx در درخواست رسانه خود استفاده کنید. واحد dpi نشان دهنده نقطه در هر اینچ CSS و dppx نشان دهنده نقطه در هر پیکسل CSS است.

در جدول زیر می توانید رابطه بین dpi و dppx را مشاهده کنید.

نسبت پیکسل دستگاه	تراکم صفحه نمایش تعمیم یافته	نقطه در هر اینچ CSS ( dpi )	نقطه در هر پیکسل CSS ( dppx )
1x	MDPI	96 dpi	1 dppx
1.5 برابر	HDPI	144 dpi	1.5 dppx
2	XHDPI	192 dpi	2 dppx

سطل های تراکم صفحه نمایش تعمیم یافته توسط اندروید تعریف شده اند و در مکان های دیگر برای بیان تراکم صفحه استفاده می شوند (به عنوان مثال https://screensiz.es ).

تصاویر پس زمینه

می توانید از پرس و جوهای رسانه ای برای اختصاص تصاویر پس زمینه به عناصر استفاده کنید. برای مثال، اگر در دستگاهی با نسبت پیکسل 1.0 یک تصویر لوگو با ابعاد 256 پیکسل در 256 پیکسل دارید، ممکن است از قوانین CSS زیر استفاده کنید:

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

برای تعویض این تصویر با یک تصویر بزرگتر در دستگاه هایی با نسبت پیکسل دستگاه 1.5 (hdpi) و 2.0 (xhdpi)، می توانید قوانین زیر را اضافه کنید:

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_384x384.png');
  }
}

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

سپس می‌توانید این تکنیک را با سایر پرسش‌های رسانه‌ای، مانند min-width ادغام کنید، که برای محاسبه فاکتورهای فرم مختلف مفید است.

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
    background-image: url('../images/html5_1024x1024.png');

    max-height: 512px;
    max-width: 512px;
  }
}

ممکن است متوجه شوید که max-height و max-width روی 512 پیکسل برای رزولوشن 2 ddpx ، با تصویر 1024x1024 پیکسل تنظیم شده است. این به این دلیل است که یک "پیکسل" CSS در واقع نسبت پیکسل دستگاه (512px * 2 = 1024px) را در نظر می گیرد.

در مورد <img/> چطور؟

وب امروز راه حلی برای این موضوع ندارد. پیشنهادهایی وجود دارد، اما در مرورگرهای فعلی یا WebView در دسترس نیستند.

در عین حال، اگر DOM خود را در جاوا اسکریپت ایجاد کنید، می توانید منابع تصویری متعددی را در یک ساختار دایرکتوری متفکر ایجاد کنید:

images/
  mdpi/
    imagename.png
  hdpi/
    imagename.png
  xhdpi/
    imagename.png

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

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

همچنین، می‌توانید URL اصلی صفحه را تغییر دهید تا URLهای مربوط به تصاویر را تعریف کنید.

<!doctype html>
<html class="no-js">
<head>
  <script>
    function getDensityDirectoryName() {
      if(!window.devicePixelRatio) {
          return 'mdpi';
      }

      if(window.devicePixelRatio > 1.5) {
          return 'xhdpi';
      } else if(window.devicePixelRatio > 1.0) {
          return 'hdpi';
      }

      return 'mdpi';
    }

    var baseUrl =
        'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
    document.write('<base href="'+baseUrl+'">');
  </script>

    ...
</head>
<body>
    ...
</body>
</html>

این رویکرد بارگذاری صفحه را مسدود می‌کند و استفاده از مسیرهای مطلق را برای همه منابع، مانند تصاویر، اسکریپت‌ها و فایل‌های CSS، مجبور می‌کند، زیرا URL پایه به دایرکتوری با چگالی خاص اشاره می‌کند.