تبدیل پیکسل به سانتی‌متر در طراحی سایت

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

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

dpi pixel cm

نمایشگرهای رتینا( Retina ) اپل

در مدل جدید طراحی سایت که اندازه‌ی پیکسل‌ها بسیار متفاوت است، به صورت منطقی، استفاده از پیکسل توجیهی ندارد. زیرا نه تنها گوشی‌های هوشمند، بلکه کامپیوترهای رومیزی با نمایشگرهای رتینا که وضوح تصویری بسیار بالا دارند، مورد استفاده هستند. تعداد پیکسل‌های موجود در عرض یک نمایشگر جدید ممکن است بیش از ۳۰۰۰ یا ۴۰۰۰ پیکسل باشد و اگر اندازه‌ی یک تصویر را مثلا ۱۰۲۴ پیکسل تعریف کنید، ممکن است روی یک نمایشگر تمام صفحه و روی یک نمایشگر جدید تنها یک چهارم صفحه را اشغال کند.

مرورگرها چه نقشی دارند ؟

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

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

تبدیل سانتی‌متر به پیکسل

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

راه حل دقیقی هم برای تبدیل پیکسل به سانتی‌متر وجود ندارد. به صورت سنتی و بر اساس نمایشگرهای قدیمی با وضوح ۷۲dpi در هر سانتی‌متر ۲۸ پیکسل وجود دارد ولی همان طور که گفته شد این عدد در دنیای واقعی به این صورت نیست.

برای تبدیل دقیق سانتی‌متر به پیکسل یا بالعکس باید dpi نمایشگر مشخص باشد. اگر وضوح یک نمایشگر ۳۰۰dpi باشد، در هر سانتی‌متر ۱۱۸ پیکسل وجود خواهد داشت.

جهت تبدیل سانتی‌متر به پیکسل می‌بایست میزان وضوح را به عدد ۲.۵۴ تقسیم کنید. مثلا برای وضوح ۲۰۰dpi آن را به ۲.۵۴ تقسیم می‌کنیم تا عدد ۷۸ به دست بیاید.

از چه واحدی در طراحی سایت استفاده کنیم ؟

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

همچنین برای بهترین کارایی، می‌توانید اندازه‌ی فونت اصلی را روی تگ body خود تعریف کنید و تمام اندازه‌های دیگر را با کمک واحد em که معادل اندازه‌ی فونت انتخاب شده است مشخص کنید.

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱