بوم DPI بالا

Paul Lewis

مقدمه

صفحه نمایش های HiDPI دوست داشتنی هستند، آنها همه چیز را صاف تر و تمیزتر نشان می دهند. اما آنها همچنین مجموعه جدیدی از چالش ها را به توسعه دهندگان ارائه می دهند. در این مقاله قصد داریم به چالش های منحصر به فرد ترسیم تصاویر در بوم در زمینه صفحه نمایش HiDPI نگاهی بیندازیم.

ویژگی devicePixelRatio

بیایید از ابتدا شروع کنیم. قبل از اینکه ما صفحه‌های HiDPI داشته باشیم، یک پیکسل یک پیکسل بود (اگر کمی از بزرگ‌نمایی و بزرگ‌نمایی را نادیده بگیریم) و تمام، واقعاً نیازی به تغییر چیزی در اطراف نبود. اگر چیزی را به اندازه 100 پیکسل تنظیم کنید، تمام چیزی که وجود داشت بود. سپس اولین گوشی‌های همراه HiDPI با ویژگی کمی معمایی devicePixelRatio در شی پنجره ظاهر شدند و برای استفاده در جستجوهای رسانه‌ای در دسترس بودند. چیزی که این ویژگی به ما اجازه انجام آن را می‌دهد این بود که بفهمیم چگونه مقادیر پیکسل (که ما آن را مقدار پیکسل منطقی می‌نامیم) در - مثلاً - CSS به تعداد واقعی پیکسل‌هایی که دستگاه در هنگام رندر استفاده می‌کند ترجمه می‌شود. در مورد iPhone 4S که دارای devicePixelRatio 2 است، خواهید دید که مقدار منطقی 100px برابر با مقدار دستگاه 200px است.

این جالب است، اما چه معنایی برای ما توسعه دهندگان دارد؟ خوب در روزهای اول همه ما متوجه شدیم که تصاویر ما توسط این دستگاه‌ها ارتقا یافته است. ما تصاویری را در عرض پیکسل منطقی عناصرمان ایجاد می‌کردیم و وقتی آنها بیرون کشیده می‌شدند، توسط دستگاهPixelRatio ارتقا پیدا می‌کردند و تار می‌شدند.

شکل 1 - تصویری که به دلیل دستگاهPixelRatio ارتقا یافته و تار شده است

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

function setupCanvas(canvas) {
  // Get the device pixel ratio, falling back to 1.
  var dpr = window.devicePixelRatio || 1;
  // Get the size of the canvas in CSS pixels.
  var rect = canvas.getBoundingClientRect();
  // Give the canvas pixel dimensions of their CSS
  // size * the device pixel ratio.
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  var ctx = canvas.getContext('2d');
  // Scale all drawing operations by the dpr, so you
  // don't have to worry about the difference.
  ctx.scale(dpr, dpr);
  return ctx;
}

// Now this line will be the same size on the page
// but will look sharper on high-DPI devices!
var ctx = setupCanvas(document.querySelector('.my-canvas'));
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();