1. آشنایی با نقاط شکست (Break Points) در CSS
2. آشنایی با طراحی واکنشگرای وب (Responsive Web Design)
3. مطالعه قسمت اول نوشته نسبت دستگاه

نسبت دستگاه |  نسبت پیکسل دستگاه
نسبت دستگاه | نسبت پیکسل دستگاه

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

برای اینکه بتونیم این موضوع رو بررسی کنیم کدی می‌نویسم که تنها در تصویری که عرض صفحه برابر با 360 پیکسل بود پس زمینه صفحه تغییر کند. تا این صفحه رو روی موبایل اجرا کنیم و ببینیم نتیجه درسته یا نه؟

تست اعداد جدید به دست اومده از طریق جاوا اسکریپت
تست اعداد جدید به دست اومده از طریق جاوا اسکریپت

همونطوری که می‌بینید استفاده از اعداد جدید درست است و برای موبایل من که باید برای نقطه شکست CSS دقیقاً 360 پیکسل هست. پس می توانید نتیجه بگیریم اعدادی که در statcounter داره نمایش داده میشه

تا اینجا جواب یکی از سوالاتی است که در قسمت قبلی مطرح شده بود، اما هنوز دو سوال بدون پاسخ مونده.

  1. چه اتفاقی افتاده است که ارتفاع و عرض صفحه نمایش در آن ارتفاع و صفحه نمایش در داخل صفحه موبایل متفاوت است؟
  2. چه نسبت و رابطه‌ای بین ارتفاع و عرض صفحه نمایش در مرورگر و موقعیت موبایل وجود دارد؟
  3. آیا این عرض و ارتفاعی که نشان می دهد می تواند همون اعدادی باشد که در پیدا کردن نقطه شکست به ما کمک کنن؟ ✅

احتمالاً خودتون هم بتونید با کمی فکر کردن به این سوال پاسخ بدین. بیاین فکر کنیم عرض صفحه در مرورگر همون عدد نقطه موبایل یعنی ۱۰۸۰ پیکسل بود! خب، چه اتفاقی میفتاد؟

به تصویر زیر نگاه کنید.

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

بیاین عرض‌ها رو با هم در صفحه نمایش کامپیوتر و موبایل من بررسی می‌کنیم.

  • در صفحه کامپیوتر 41 سانتی‌متر است اما عدد مربوط به صفحه نمایش 1360 پیکسل است.
  • در عرض صفحه موبایل 7 سانتی‌متر است اما عدد مربوط به صفحه نمایش 1080 پیکسل است.

بیاین یه جدول تناسب ساده ببندیم ببنیم تناسب دارن یا نه؟

بررسی تناسب صفحه کامپیوتر و موبایل
بررسی تناسب صفحه کامپیوتر و موبایل

همونطور که می‌بینید عرض صفحه نمایش موبایل در صورت داشتن تناسب باید 32.5 سانتی متر باشه در صورتی که 7 سانتی‌متر هست.

میفهمیم که تناسبی وجود ندارد! وقتی قرار است توی یه صفحه‌ای که 7 سانتی‌متر هست، 32.5 سانتی‌متری رو نشون بدیم، اوضاع خیلی بی‌ریخت میشه مگه نه؟ نه تنها خوانایی ندارد بلکه طرف مدام باید توی موبایل زوم کنه تا بتونه از محتوای استفاده کنه. هیچکدوم از دکمه ها قابل استفاده نیستن و…

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

نمایش صفحه نمایش یا رِزولوشن (به انگلیسی: Resolution) در یک دستگاه تلویزیون، مانیتور کامپیوتر یا دستگاه نمایش، به تعداد پیکسل‌هایی گفته می‌شود که در هر بُعد (طول-عرض) می‌توانم آن را نشان دهم.

فهمیدین چی شد؟ نمایش صفحه نمایش به تعداد پیکسل ها گفته می شود. اگر به تصویری در قسمت اول هم گذاشته شده بود، موبایل من میتونست دو صفحه نمایش مختلف داشته باشد.

نمایش صفحه نمایش موبایل من
نمایش صفحه نمایش موبایل من

خب فرض کنید صفحه نمایش موبایلم رو از FHD+ به HD+ تغییر بدم، این یعنی اگر قرار بود استفاده از وب هم همینطور باشه اونوقت باید بعد از هر بار تغییر ساختار صفحات وب برای من تغییر پیدا می‌کرد و هر بار صفحات. وب رو به یک شکل خاص میدیدم.

اصلاً این به کنار بزارین همین مورد رو، روی صفحه نمایش لپ‌تاپ مثال بزنم تا بهتر متوجه این موضوع بشین.

نمایش‌های صفحه نمایش در لپ تاپ
نمایش‌های صفحه نمایش در لپ تاپ

همونطور که می‌بینید بازه زیادی از اعداد در قسمت نمایش صفحه نمایش لپ تاپ وجود خب اگه قرار باشه با هر تغییری داره صفحه نمایش صفحات وب زیر و رو میشه دیگه حال به آدم میمونه؟ نه والا! 😂

منظورم این نیست که کلاً هیچ تغییری ندارد، بلکه منظورم این است که تغییرات بنیادین مثل تفاوت آن 7 سانتی‌متر موبایل و 32.5 سانتی‌متری که از طریق تناسب به دست آوردیم، ندارد.

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

این همه توضیح دادم و دلیل آوردم تا به این عدد برسیم. امیدوارم خسته نباشید ولی مهمه از پس زمینه برخی موضوعات اطلاع داشته باشید چرا که باعث میشه چیزایی بدونید که بقیه نمیدونن 😉

شاید فکر کنید برای اولین بار که DPR رو ببینید ولی نه! به تصاویر زیر نگاه کنید.

ریسپانسیو کردن در مرورگر کروم و فایرفاکس
ریسپانسیو کردن در مرورگر کروم و فایرفاکس

تفاوتی که از Chrome برای تست‌گرا (پاسخگو) استفاده می‌کنید یا فایرفاکس در هر دو مورد احتمالاً در قسمت Responsive هر دو عبارت DPR قابل مشاهده است.

اما قبل از اینکه ادامه بدیم بزارین سایت mydevice.io رو معرفی کنم. در این سایت می‌تونید بدون اینکه نیاز به کدنویسی داشته باشید، صفحه نمایش و عدد DPR رو پیدا کنید.

سایت mydevice.io و صفحه نمایش کامپیوتر
سایت mydevice.io و صفحه نمایش کامپیوتر

چطوره همین سایت رو، روی موبایل اجرا کنم ببینم به عنوان Pixel Ratio چه عددی نشون میده؟

سایت mydevice.io با دو صفحه نمایش متفاوت در موبایل
سایت mydevice.io با دو صفحه نمایش متفاوت در موبایل

دیدین چقدر جالبه زمانی که نمایش صفحه نمایش موبایل روی 1080 * 2340 باشه، عددی که به عنوان Pixel Ratio نمایش میده 3 هست در صورتی که اگر نمایش صفحه نمایش روی 720 * 1560 تنظیم شود عددی که به عنوان Pixel Ratio نمایش میده 2 هست.

احتمالاً تا الان به تقسیم کردن تصویر صفحه نمایش به Pixel Ratio فکر کردین. خب بزارین تقسیم کنیم ببینیم نتیجه چی میشه؟

1080px / 3 = 360px

720 پیکسل / 2 = 360 پیکسل

چی شد؟ با تقسیم نمایش صفحه نمایش (Screen Resolution) بر نسبت پیکسل دستگاه (DPR) چقدر مناسب برای نقطه شکست پیدا می شود.

اما شاید دوست داشته باشید بدونید چطوری میشه این عدد رو با استفاده از جاوا اسکریپت پیدا کرد. برای این کار می توانید از کد زیر استفاده کنید.

window.devicePixelRatio

سوالاتی که در قسمت قبل پرسیده شده بود رو یادتون هست؟

تونستیم به هر سه سوال به خوبی پاسخ بدیم و بفهمیم که..

  1. چه اتفاقی افتاده است که ارتفاع و عرض صفحه نمایش در آن ارتفاع و صفحه نمایش در داخل صفحه نمایش موبایل متفاوت است. ✅
  2. چه نسبت و رابطه‌ای بین ارتفاع و عرض صفحه نمایش در مرورگر و موقعیت موبایل وجود دارد. ✅
  3. این عرض و ارتفاعی که دارد داده می شود همون اعدادی هستند که میتونن در پیدا کردن Break Point به ما کمک کنن. ✅

اما بیاین برای اطمینان بیشتر همین مورد رو توی لپ تاپ هم می کنیم.

2160 * 3840
2160 * 3840
2160 * 3840
2160 * 3840

در نمایش صفحه نمایش 2160 * 3840 عدد نمایش داده شده برای DPR برابر 2.5 هست، پس

3840px / 2.5 = 1536px

1920 * 1080
1920 * 1080
1920 * 1080
1920 * 1080

در نمایش صفحه نمایش 1080 * 1920 عدد نمایش داده شده برای DPR برابر 1.25 هست، پس

1920 پیکسل / 1.25 = 1536 پیکسل

اما صبر کنید ببینیدم برگردید به تصاویر نگاه کنید. چرا باید مقیاس در نمایش صفحه نمایش‌های مختلف تغییر کند؟ چگونهه روی همون نمایش صفحه نمایش 2160 * 3840 عدد مقیاس رو تغییر بدیم و تست بگیریم.

  2160 * 3840 در مقیاس با عدد 200 درصد
2160 * 3840 در مقیاس با عدد 200 درصد
  2160 * 3840 در مقیاس با عدد 200 درصد
2160 * 3840 در مقیاس با عدد 200 درصد

در نمایش صفحه نمایش 2160 * 3840 با مقیاسی برابر با 200 درصد، نسبت پیکسل دستگاه (DPR) برابر 2 هست، پس

3840px / 2 = 1920px

  2160 * 3840 در مقیاس با عدد 350 درصد
2160 * 3840 در مقیاس با عدد 350 درصد
  2160 * 3840 در مقیاس با عدد 350 درصد
2160 * 3840 در مقیاس با عدد 350 درصد

در نمایش صفحه نمایش 2160 * 3840 با مقیاسی برابر با 350 درصد، نسبت پیکسل دستگاه (DPR) برابر 3.5294 هست، پس

3840px / 3.5294 = 1088px

از موضوع چه نتیجه‌ای می‌توانیم بگیریم؟

میزان مقیاسی که در تنظیمات ویندوز برای وضوع صفحه نمایش تنظیم می‌کنیم به نوعی همون DPR هست و با رابطه مستقیم DPR دارد.

امروز اگر خواستین از طریق اعدادی که جاوا اسکریپت به ما به عنوان عرض و ارتفاع صفحه میده نمایش صفحه نمایش دستگاه رو حساب کنید دیگه میدونید باید چیکار کنید. چون به آسانی با ضرب عرض و ارتفاع صفحه در DPR می توانید اعداد واقعی را مشاهده کنید صفحه کاربرتون رو پیدا کنید.

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

در فرآیند بهینه سازی یکی از موضوعات مهم، بهینه سازی تصاویر هستند. جدا از موضوع lazy-load ما سعی می کنیم، زمانی که یک تصویر ارسال می شود، می تواند نسخه هایی با سایت های مختلف از اون بسازیم تا در دستگاه ها، مناسب با سایزشون تصویر رو نمایش بدیم.

مثلا تصور کنید با سایز زیر آپلود میشه. بعد از آپلود چند نسخه از اون ساخته میشه.

  • اندازه تصویر اصلی: 1080 * 1920
  • تصویر مناسب برای تبلت: 540 * 960
  • تصویر مناسب برای موبایل: 360 * 640

این نسخه با توجه به اینکه کاربر با چه دستگاهی و چه نقطه شکستی دارد سایت رو نگاه می‌کند بارگیری (بارگیری) میشن. برای اینکه بدونید این کار چطور انجام می شود می توانید این نوشته رو مطالعه کنید.

اما چه اتفاقی افتاد که باعث تعجب من شد؟ خب من برای موبایل با توجه به نقطه شکست 360 و اندازه‌ای که اون باکس در اون قسمت از سایت با توجه به حاشیه‌ها (padding, margin) و… عدد 320 پیکسل رو به عرض تصویر در نظر گرفتم. تصاویر هم به شکلی بود که در اونها عنوان مقاله دوباره نوشته شده بود به همراه واترمارک لوگو و…

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

آن زمان علت این موضوع رو نفهمیدم و برای رفع مشکل از تصاویر با سایز بزرگتر استفاده کردم. اما چند وقت پیش که با مفهوم DPR آشنا شدم ناخوداگاه یاد اون موضوع افتادم و فهمیدم که چه اتفاقی افتاده بود.

زمانی که روی کامپیوتر می‌کردم، عدد DPR برابر با 1 بود و همه چیز به خوبی نشان می‌داد اما وقتی همین مورد رو توی موبایل میبردم DPR برابر با 3 یا حتی بیشتر بود. در نتیجه من تصویری که باید عرض 960 پیکسل داشته باشه تا به بهترین شکل نمایش داده بشه رو با عرض 320 پیکسل نمایش میدادم انگار که شما روی یک تصویر معمولی سه برابر زوم کرده باشین. طبیعیه که بی کیفیت نشون داده میشد.

چرا که مفهوم اصلی DPR به معنی نسبت پیکسلهای منطقی (چیزی که واقعاً هست) به پیکسل‌های منطقی (چیزی که نشان میده) هست.
اشتباه من در این واقعه بود که تصویر رو با تصاویری از منطقی ساخته شده بود که در آن تصاویر می‌شدند.

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

برای اینکه این موضوع رو توی موبایل خودتون تست کنید این لینک رو باز کنید. جزئی تصویر متوسطی داره.

امیدوارم که این دو قسمت از نوشتۀ «نسبت پیکسل دستگاه» شما خسته نباشید و براتون مفید بوده باشد. 😄

خوشحال میشم نظراتتون رو در مورد این موضوع بنویسید و همینطور اگر مایل بودین میتونید من رو با آیدی AliManian21 در شبکه های اجتماعی مختلف دنبال کنید.

اگر دوست داشتی امتیاز دادن یادت نره!