CSS Media Queries برای iPads و iPhones

[JahanSoft]

طی چند سال گذشته که مفهوم Responsive برای وب سایت‌ها مطرح شد، بدلیل تعدد دستگاه‌های موجود، طراحان وب‌سایت‌ها به مشکلات بسیاری برای بهینه‌سازی سایت‌های طراحی شده بر روی دستگاه‌ها برخورده‌اند. همین موضوع باعث بوجود آمدن Media Queryهای مختلف و متعددی برای دستگاه‌های مختلف شده است. در این مقاله Media Queryهای پرکاربرد دستگاه‌های شرکت اپل (Apple) از جمله آیفون، آی‌پد و ... برای سهولت کار شما قرار داده شده است.

مدیا کوئری‌های آی‌پد - iPad Media Queries ( همه نسل‌ها حتی iPad mini )

این شرکت با ایجاد یک تجربه سازگار ساده برای کاربران و برای برای توسعه‌دهندگان، کار را آسان کرده است.
تمام iPad ها (1 تا 5 و mini) را می‌توان تنها با یک CSS Media Query هدف قرار داد.

iPad in portrait & landscape

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* STYLES GO HERE */}

iPad in landscape

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
and (orientation : landscape) {/* STYLES GO HERE */}

iPad in portrait

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
 /* STYLES GO HERE */
}

اگر می‌خواهید نسل سوم و چهارم (صفحات رتینا) را برای اضافه کردن گرافیک 2x@ یا برای استفاده از دیگر توانایی‌های صفحه نمایش Retina هدف قرار دهید ، این کد را استفاده کنید.

Retina iPad in portrait & landscape

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES GO HERE */
}

Retina iPad in landscape

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES GO HERE */
}

Retina iPad in portrait

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 2) {
 /* STYLES GO HERE */
 }

اگر می خواهید در صفحه کوچکتر یا گرافیک پایین تر یا Typography را برای کیفیت تصویر کمتر اعمال کنید، کد پایین راه حل کار شماست.

iPad 1 & 2 in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
 /* STYLES GO HERE */
}

iPad 1 & 2 in landscape

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
 /* STYLES GO HERE */
}

iPad 1 & 2 in portrait

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* STYLES GO HERE */
}

هدف قراردادن iPad mini جدید به دلیل داشتن کیفیت تصویرو نسبت پیکسلی نسل یک و دو به همان شکل این دو سری ست و به سختی که تصور می شود، نیست. ( منبع این مقایسه Daring Fireball)

این امر یاعث شد که مطلب جدیدی برای یادگیری نیاز نباشد , ولی همین مزیت نقطه ضعف هم هست، زیرا راهی برای فقط هدف قرار دادند iPad mini نیست.iPad mini Resolution
Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)
Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)
Device-pixel-ratio: 1
حال به Media Query های iPhone می رسیم!

iPhone 6 Media Queries
iPhone 6 in portrait & landscape

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
iPhone 6 in landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
 /* STYLES GO HERE */
}

iPhone 6 in portrait

@media only screen and (min-device-width : 375px) and (max-device-width : 667px)
and (orientation : portrait) {
 /* STYLES GO HERE */
 }

iPhone 6 Plus Media Queries
iPhone 6 Plus in portrait & landscape

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
/* STYLES GO HERE */
}

iPhone 6 Plus in landscape

@media only screen and (min-device-width : 414px) and (max-device-width : 736px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

iPhone 6 Plus in portrait

@media only screen and (min-device-width : 414px) and (max-device-width : 736px)
and (orientation : portrait) {
 /* STYLES GO HERE */
}

iPhone 5 & 5S Media Queries
iPhone 5 & 5S in portrait & landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* STYLES GO HERE */
}

iPhone 5 & 5S in landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

iPhone 5 & 5S in portrait

@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
and (orientation : portrait) {
 /* STYLES GO HERE */
}

iPhone 2G, 3G, 4, 4S Media Queries

لازم به ذکر است که این کد ها برای iPod Touch نسل 1-4 هم کار می کنند.

iPhone 2G-4S in portrait & landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 /* STYLES GO HERE */
}

iPhone 2G-4S in landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
and (orientation : landscape) {
 /* STYLES GO HERE */
}

iPhone 2G-4S in portrait

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
and (orientation : portrait) {
 /* STYLES GO HERE */
 }

iPhone 5 Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 568px (CSS Pixels)
Screen Width = 640px (Actual Pixels)
Screen Height = 1136px (Actual Pixels)
Device-pixel-ratio: 2

iPhone 4/4S Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)
Screen Width = 640px (Actual Pixels)
Screen Height = 960px (Actual Pixels)
Device-pixel-ratio: 2
iPhone 2G/3G/3GS Resolution
Screen Width = 320px (CSS Pixels)
Screen Height = 480px (CSS Pixels)
Screen Width = 320px (Actual Pixels)
Screen Height = 480px (Actual Pixels)
Device-pixel-ratio: 1

منبع