CSS Media Queries برای iPads و iPhones

CSS Media Queries برای iPads و iPhones
طی چند سال گذشته که مفهوم Responsive برای وب سایت‌ها مطرح شد، بدلیل تعدد دستگاه‌های موجود، طراحان وب‌سایت‌ها به مشکلات بسیاری برای بهینه‌سازی سایت‌های طراحی شده بر روی دستگاه‌ها برخورده‌اند. همین موضوع باعث بوجود آمدن Media Queryهای مختلف و متعددی برای دستگاه‌های مختلف شده است. در این مقاله Media Queryهای پرکاربرد دستگاه‌های شرکت اپل (Apple) از جمله آیفون، آی‌پد و ... برای سهولت کار شما قرار داده شده است.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید
مدیا کوئری‌های آی‌پد - 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
 
 

فعال در حوضه وب از سال ۹۱ ( FrontEnd & BackEnd ) , کارشناس مهندسی کامپیوتر نرم افزار , کارشناسی ارشد MBA گرایش استراتژیک , تسلط به زبان انگلیسی و آشنایی نسبی با زبان فرانسوی , طرفدار موسیقی کلاسیک راک و نوازنده سازدهنی ....

نظرات و سوالات کاربران

ارسال پاسخ kalatik
kalatik
شنبه ۲۶ اسفند ۱۳۹۶ ۱۸:۵۲
ممنون مطلب مفیدی بود.
ارسال پاسخ میثم
میثم
شنبه ۱۶ بهمن ۱۳۹۵ ۱۶:۵۹
ممنون،‌ کاربردی بود