Как различить экран для ipad и ipad pro в css

Question

Итак, я хочу сделать отзывчивый загрузчик (изображение). что позиция всегда посередине экрана и ширина всегда соответствуют размеру экрана. Итак, я использовал экран @media только для этого, и теперь у меня есть проблема, чтобы отличить размер для ipad и ipad pro.

это код:

/*ipad portrait*/ 
 
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
 
    \t .sp-conload img{ 
 
    \t \t width: 100%; 
 
     \t height: auto; 
 
    \t \t margin-top: -330px; 
 
    \t } 
 
    } 
 
    
 
    /*ipad landscape*/ 
 
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
 
    \t .sp-conload img { 
 
     width: 65%; 
 
     height: auto; 
 
     margin-top: -290px; 
 
    \t } 
 
    } 
 
    
 
    /*ipad pro portrait*/ 
 
    @media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait) { 
 
    \t .sp-conload img{ 
 
    \t \t width: 100%; 
 
     \t height: auto; 
 
    \t \t margin-top: -460px; 
 
    \t } 
 
    } 
 
    
 
    /*ipad pro landscape*/ 
 
    @media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape) { 
 
    \t .sp-conload img{ 
 
    \t \t width: 70%; 
 
     \t height: auto; 
 
    \t \t margin-top: -440px; 
 
    \t } 
 
    }

<div class="sp-conload"> 
 
    \t \t \t \t <div class="sp-loader" > 
 
         <h2 id="anim9" class="frame-9"><span><img src="../img/loader/9.png"></span></h2> 
 
         <h2 id="anim8" class="frame-8"><span><img src="../img/loader/8.png"></span></h2> 
 
         <h2 id="anim7" class="frame-7"><span><img src="../img/loader/7.png"></span></h2> 
 
         <h2 id="anim6"class="frame-6"><span><img src="../img/loader/6.png"></span></h2> 
 
         <h2 id="anim5" class="frame-5"><span><img src="../img/loader/5.png"></span></h2> 
 
         <h2 id="anim4" class="frame-4"><span><img src="../img/loader/4.png"></span></h2> 
 
         <h3 id="anim10" class="frame-10"><span><img src="../img/loader/10.png"></span></h3> 
 
    \t \t \t \t </div> 
 
    \t \t </div> 
 

 

 

 

проблема, когда я открываю с IPad будет использовать Скины про, но если бы я использовал !important в размере Ipad, когда я открываю с ipad pro он будет использовать размер ipad, потому что у них есть max-device-width : 1024px для ipad и min-device-width : 1024px для ipad pro, и я думаю, что он столкнулся. любое предложение?

Answer 1

Этот код представляет собой новый способ поместить изображение в центр экрана. Однако некоторые из стилей здесь не поддерживаются старыми браузерами. Хорошая вещь, хотя в том, что вам не нужны все те @media стили :)

.sp-conload img{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    height: 100vh; 
}