זיהוי מצב המסך (לאורך או לרוחב) וביצוע פקודות CSS בהתאם

כאשר המשתמש גולש ממובייל, לא פעם נרצה לזהות האם מסך המשתמש הוא לאורך או לרוחב ובהתאם לכך לשנות חלק מהתצוגה.
במאמר זה אסביר כיצד ניתן לזהות זאת ואף לבצע פקודות CSS בהתאם לכך.

הצורך

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

זיהוי באמצעות JavaScript

כמו תמיד, jQuery תציע פיתרון אלגנטי.
ראשית, נכלול את הספריות הנחוצות:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

כעת נוסיף את הקוד שיזהה כאשר בוצע שינוי ב-orientation, יקפיץ לנו alert ויציין עבורנו את המצב הנוכחי:

$( window ).on("orientationchange", function( event ) {
alert(event.orientation);
});

כעת, במקום להציג הודעה, נוכל לעשות מה שנרצה עם המידע 🙂

זיהוי באמצעות CSS וביצוע פקודות בהתאם

כמובן שגם CSS לא מאכזבת ובאמצעות media queries מאפשרת לנו לזהות את מצב המסך ואף להחיל פקודות CSS בהתאם למצב המסך, הנה דוגמא:

@media all and (orientation:portrait) {
width: 40%;
}
@media all and (orientation:landscape) {
width: 90%;
}

חווית משתמש

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

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)