شرکت طراحی سایت اینتو وب ارائِه دهنده خدمات اینترنتی از قبیل طراحی سایت و بهینه سازی سایت در تهران
021-54821333 021-54821444 021-54821666 09127371388
دبی - دیره - خیابان نایف
1588457236 97+

کد رسپانسیو برای اپل

نویسنده : مجید سعادت طراحی سایت 2018/05/04
کد رسپانسیو برای اپل

همانطور که مدیدانید یکی از مشکلات طراحان وب سایت کد رسپانسیو برای اپل میباشد که قصد داریم در این مطلب به مدیا کوئری برای دستگاه های اپل از جمله آیپد و آیفون ا بپردازیم . شرکت برزگ اپل با تولید کدهای رسپانسیو ساده جهت استفاده در طراحی وب سایت برای وب مستران عزیز در نظر گرفته است که میتوان فقط با یک CSS Media Query هدف قرار داد . لطفا به تصویر زیر دقت بفرمایید و طبق همین عکس کدهای CSS را بین {} قرار دهید .

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 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 */ }

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 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 */ }
امیدوارم از این مطلب اسفباده کامل را ببرید .


 

مقالات مرتبط