为什么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则重叠呈现,

<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: 在ipadmini-Landscape中,我可以看到水平和垂直的滚动条,屏幕可以放大(我添加了meta标签) <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> )似乎是另一个问题