Html 为什么iPad4和iPadMini在网页显示上存在差异？

我将iPad和iPad mini的媒体查询用作：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape)

问题1:在横向模式下，我观察到渲染的不同，在iPad中，UI元素按预期呈现，而iPad Mini则重叠呈现

HTML代码片段

<div class="desktopContentFooter">
        <span class="hotline">You can also reach us on our Something hotline number XXXXXXXXXXX</span>
        <p class="copyright">&copy;Something (CRN: XXXXXXXX) All Rights Reserved
            <span class="desktopfooterLink">
                <a href="http://www.example.com" target="_blank" rel="noopener" title="What is Something>What is Something</a> &nbsp;|&nbsp;
                <a href="privacy-policy.html" title="Privacy Policy">Privacy Policy</a> &nbsp;|&nbsp;
                <a href="tnc.html" title="Terms &amp; Conditions">Terms &amp; Conditions</a>
            </span>
        </p>
    </div>

问题2:在iPad迷你版中，我看到屏幕放大的水平和垂直滚动条（我添加了meta标记“

”），这似乎是另一个问题

---

请建议处理这些情况的方向

您的元标记是正确的。但由于不同设备的DPI/像素密度不同，因此应使用以下设备：

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

}

请务必查看此链接：

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

}