html - 为什么网页在 Ipad 4 和 Ipad mini 中显示不同？

Question

我将 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>

横向媒体查询中的关联 CSS:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape){
.desktopContentFooter{
        float:none;
        margin-top: 57px;
        width: 660px;
        display:block;
        position: absolute;
        top: 843px;
        left: 678px;
        text-align:center;
    }

    .hotline{
        font-family: AvenirBook_New;
        font-size: 15px;
        color:#1d3444;
        height:28px;
        width:auto;
        margin-bottom:5px;
    }

    .copyright{
        font-family: AvenirBook_New;
        font-size: 18px;
        color:#1d3444;
        height:15px;
        width:auto;
        margin-bottom:5px;
        display: flex;
    flex-direction: column;
    }

    .desktopfooterLink{
        font-family: AvenirBook_New;
        font-size: 18px;
        /* margin-top: 24px; */
    }
}

问题 2: 在 iPad mini Landscape 中我得到水平和垂直滚动条并放大屏幕(我添加了元标记“<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">”)似乎是其他问题

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

Answer 1

你的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 ***/

}

请务必查看此链接:http://stephen.io/mediaqueries/