为什么 Ipad 4 和 Ipad mini 的网页显示有差异？答案

【问题标题】：Why there is a difference in the display of webpage in Ipad 4 vs Ipad mini?为什么 Ipad 4 和 Ipad mini 的网页显示有差异？
【发布时间】：2019-01-16 14:04:11
【问题描述】：

我将 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">”）似乎是其他问题

请提出处理这些情况的方向

【问题讨论】：

标签： html css ipad media-queries responsive

【解决方案1】：

您的元标记是正确的。但由于设备之间的 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/

【讨论】：