שאילתות מדיה למכשירים ניידים

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

במאמר זה נביא טבלה המראה את ההבדלים בין המכשרים השונים (מדגם) ודוגמא לקובץ 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 */
}

שאילתות מדיה למכשירים ניידים

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

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

הדגמות