כשפיקסל הוא לא פיקסל

כשפיקסל הוא לא פיקסל

אסף כ"ץ
13.03.2023

רוצה לשתף אתכם בתופעה מתסכלת שחוזרת על עצמה בתהליך הQA מול המעצבים, ובסיבה לכך.

בשעה טובה סיימנו את תהליך הפיתוח, עייפים אך מרוצים אנחנו שולחים את המוצר לביקורת של המעצבים, יושבים רגל על רגל, שותים קפה, מעלעלים במגזין, כשחמש דקות לאחר מכן מתקבל טלפון היסטרי מצוות העיצוב – "יש טעות בגדלים!!! הלקוח רואה את האתר בגודל הלא נכון!!!"

אחרי שניקינו מעלינו את שאריות הקפה שנשפכו מהבהלה, אנחנו מסתכלים זה על זה בהבנה וחיוך (טוב, לא תמיד), ומתפנים להסביר למעצבים מה בעצם קרה.

אז מה באמת קרה? שינויי תצוגה במסך קורים בדרך כלל כשרזולוצית המסך מאוד גדולה יחסית לגודל המסך (בעיקר בלפטופים או במסכי 5K). אם בעבר רזולוציות וגדלי המסכים היו בטווח די קרוב זו לזה, היום יש לנו טווח של גדלים מסך ורזולוציות. אם המסך קטן והרזולוציה מאוד גבוהה, התצוגה תראה מאוד מאוד קטנה, ולכן, על מנת "לנרמל" את התצוגה מערכות ההפעלה של היום (גם Windows וגם mac OS ואני לא בטוח אבל נדמה לי שגם בלינוקס) עושות באופן אוטומטי, ובד"כ ללא ידיעת המשתמש, הגדלה של כל התצוגה בטווח של 125% – 200%. כתוצאה מזה, הלקוח שלנו שיודע שיש לו מסך עם רזולוצית HD, כלומר 1920 על 1080 פיקסלים, לא מודע לזה שהוא רואה את התצוגה כאילו יש לו רזולוציה יותר נמוכה , קרי – האלמנטים על המסך נראים גדולים יותר.

איך לבדוק אם יש לכם הגדלה של התצוגה?

במק:

https://www.eizoglobal.com/support/compatibility/dpi_scaling_settings_mac_os_x/

ווינדוס:

https://support.microsoft.com/en-us/windows/view-display-settings-in-windows-37f0e05e-98a9-474c-317a-e85422daa8bb

במקרה כזה שימוש בrem מקום בפיקסלים בפיתוח יכול לפתור את הבעיה בקלות, אבל זה ענין לפוסט אחר.








    * שדות חובה


    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.