CSS Media Queries برای iPads و iPhones
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
مشاوره و خدمات سئو
آژانس تخصصی "انجام سئو"؛ ارائه خدمات حرفه ای سئو سایت
خودتان را اینجا معرفی کنید
آژانس تخصصی "انجام سئو"؛ ارائه خدمات حرفه ای سئو سایت
مدیا کوئریهای آیپد - iPad Media Queries ( همه نسلها حتی iPad mini )
این شرکت با ایجاد یک تجربه سازگار ساده برای کاربران و برای برای توسعهدهندگان، کار را آسان کرده است.
تمام iPad ها (1 تا 5 و mini) را میتوان تنها با یک CSS Media Query هدف قرار داد.
این شرکت با ایجاد یک تجربه سازگار ساده برای کاربران و برای برای توسعهدهندگان، کار را آسان کرده است.
تمام 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
iPad 1 & 2 in landscape
iPad 1 & 2 in portrait
هدف قراردادن iPad mini جدید به دلیل داشتن کیفیت تصویرو نسبت پیکسلی نسل یک و دو به همان شکل این دو سری ست و به سختی که تصور می شود، نیست. ( منبع این مقایسه Daring Fireball)
@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 نیست.
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
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
iPhone 6 in portrait
iPhone 6 Plus Media Queries
iPhone 6 Plus in portrait & landscape
iPhone 6 Plus in landscape
iPhone 6 Plus in portrait
iPhone 5 & 5S Media Queries
iPhone 5 & 5S in portrait & landscape
iPhone 5 & 5S in landscape
iPhone 5 & 5S in portrait
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
iPhone 2G-4S in landscape
iPhone 2G-4S in portrait
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
@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
نظرات و سوالات کاربران