html - 如何在 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 大小，因为他们为 ipad 设置了 max-device-width : 1024px ，为 ipad pro 设置了 min-device-width : 1024px ，我认为这是冲突的。有什么建议吗？

Answer 1

这段代码是将图像放在屏幕中央的新方法。但是，旧浏览器不支持此处的某些样式。好消息是您不需要所有这些@media 样式:)

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