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

Question

所以，我想做一个响应加载器(图像)。这个位置总是在屏幕的中间，宽度总是跟随屏幕的大小。因此，我只使用@media屏幕来实现这一点，现在我遇到了一个问题，无法区分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

这段代码是在屏幕中央放置图像的新方法。但是，这里的一些样式不受旧浏览器的支持。不过，好消息是你不需要所有这些@媒体风格:)

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