מיגוון המכשירים הניידים בעלי גודלי מסך שונים יצר צורך בהבחנה בין גדלי המסכים שלהם.

במאמר זה נביא טבלה המראה את ההבדלים בין המכשרים השונים (מדגם) ודוגמא לקובץ CSS שמכיל הגדרות למכשירים ניידים לפי הגדרות של רוחב המסך

טבלה - מדגם של מכשירים ניידים ורזולוצית המסך שלהם

חברה דגם רזולוציית מסך
Apple  Ipad  768 x 1024
   Ipad 2  768 x 1024
   Ipad 3  1536 x 2048
   Ipad 4  1536 x 2048
   iPad Mini  768 x 1024
   iPhone  320 x 480
   iPhone 4  640 x 960
   iPhone 4S  640 x 960
   iPhone 5  640 x 1136
   iPod Touch  320 x 480
Samsung Galaxy Note 2 720 x 1280
   Galaxy Note 3 1080 x 1920 
   Galaxy S 480 x 800 
   Galaxy S II  480 x 800
   Galaxy S3 720 x 1280 
   Galaxy S4 1080 x 1920 

דוגמה לקובץ CSS לטיפול ברזולוציות שונות

/* Default wide-screen styles */

@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}

@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
}

@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
}

@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
}

@media all and (max-width: 240px) {
    /* styles for smaller devices */
}

הדגמות

הדגמת ג'ומלה

בקרוב, הדגמת רכיבים ומודולים...