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
منبع