如何在 css 中区分 ipad 和 ipad pro 的媒体屏幕

Question

所以，我想做一个响应式加载器（图片）。位置总是在屏幕中间，宽度总是跟随屏幕的大小。所以，我使用@media only screen 来做到这一点，现在我无法区分 ipad 和 ipad pro.

的大小

这是代码：

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

    <div class="sp-conload">
        <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>
        </div>
      </div>

问题是，当我用 ipad 打开时，它将使用 ipad pro，但是如果我使用 ipad 大小的 !important，当我用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;
}

如何在 css 中区分 ipad 和 ipad pro 的媒体屏幕

how to differentiate media screen for ipad and ipad pro in css

html

css

ipad

responsive-design