مدیا کوئری های دستگاه های اپل برای ipads و iphones
بعد از معرفی مفهوم ریسپانسیو در طراحی سایت.یکی از مشکلات اصلی توسعه دهندگان وب هماهنگ کردن و سازگاری بیشتر وب سایت ها با دستگاه های همراه از جمله گوشی و تبلت های اندروید و دستگاهای اپل از جمله آی پد و آیفون بوده است.در این پست با مدیا کوئری های دستگاه های اپل که به صورت اختصاصی توسط این تیم منتشر شده است آشنا میشویم و در آموزش بعدی شراغ مدیا کوئری های دستگاه های اندرویدی میرویم(برای آشنایی بیشتر با مدیا کوئری های Css از این لینک استفاده کنید).
مدیا کوئریهای آیپد: iPad Media Queries + ipad mini
شرکت اپل با ایجاد یک سری مدیا کوئری های ساده برای کاربران و توسعه دهندگان کار را بسیار آشما کرده است تنها کافیست که به کدهای مدیا زیر توجه کنید.تمام iPad ها (1 تا 5 و mini) را میتوان تنها با یک CSS Media Query هدف قرار داد.(در داخل اکولاد {} میتواندی استایل های مدنظر خودتون رو برای آی پد ها هم در حالت portrait و هم در حالت landscape بنویسید).تصویر بالا منظور ما از حالت portrait و landscape را نمایش میدهد.
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 */ }
اگر میخواهیم از نسل سوم و چهارم صفحات رتینا (Retina) برای اضافه کردن گرافیک 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 */}
در استفاده از مدیا کوئری های دستگاه های اپل برای صفحات رتینا باید از این کد -webkit-min-device-pixel-ratio: 2 داخل کدهای خود استفاده کنید تا مرورگر توانایی درک برای پردازش صفحه را داشته باشد.
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 */ }
هدف قراردادن کوئری های iPad mini جدید به دلیل داشتن کیفیت تصویر و نسبت پیکسلی نسل یک و دو به همان شکل این دو سری به سختی که تصور می شود، نیست.پس به راحتی میتوانید از مدیا کوئری های آپد های نسل یک و دو برای ipad mini هم استفاده کنید.اما برای اینکه بهتر با موضع آشنا شویم با نگاهی اجمالی هم به مدیا کوئری های ipad mini می کنیم.
iPad mini 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 mini 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 mini 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 */ }
بعد از بررسی و یادگیری مدیا کوئری های تبلتهای اپل،حال نوبت میرسد به بررسی مدیا کوئری های iPhone(آیفون های سری 6 , 5 , 6s plus , 5s).مدیا کوئری های آیفون هم تفاوت چندانی با آی پد ندارد تنها تفاوت اندازه صفحه و یا رزولیشن آنهاست.
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 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 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 */ }
تمامی مدیا کوئری های که یک توسعه دهنده وب نیاز دارد تا وب سایت و یا وب اپلیکیشن خود را برای دستگاهای اپل بهینه سازی کند را در بالا به صورت کامل یادگرفیتم.امیدوارم از این آموزش استفاده کرده باشید.
برچسب:CSS Media Query, CSS Media Query for apple, CSS Media Query for iphone, iPad in landscape, iPad in portrait, استفاده از Font-awesome در وردپرس, اموزش کار با مدیا کوئری media queryدرCss, توسعه دهنده وب, حالت landscape چیست, حالت portrait چیست, ریسپانسیو کردن برای آیفون, ریسپانسیو کردن برای اپید, ریسپانسیو کردن برای اندروید, ساخت سایت ریسپانسیو, ساخت سایت واکنش گرا, ساخت صفحات رتینا, ساخت صفحه ریسپانسیو, صفحات رتینا, مدیا کوئری, مدیا کوئری برای اپل, مدیا کوئری برای اندروید, مدیا کوئری در Css, مدیا کوئری های دستگاه های اندروید