html - IPAD 的 CSS 样式不起作用

Question

问题:我有以下针对页脚手机的样式:

@media (max-width: 800px){
    #footer-affiliation { 
        background-color: #0077C0; 
        color: rgb(255, 255, 255); 
        padding: 5px;
        height:110px;


        width:109.01% !important;
        margin-left:-15px;
        }
}

但是，它会影响 IPAD 上的页脚。我执行了以下操作以仅针对 IPAD 和 iPhone。对于 iphone css 样式工作正常，但是对于 IPAD 样式不起作用:

    @media only screen 
    and (min-device-width : 480px) 
    and (max-device-width : 800px) 
    and (orientation : portrait) {
     #footer-affiliation { 
        background-color: #0077C0; 
        color: rgb(255, 255, 255); 
        padding: 5px;
        height:110px;


        width:104% !important;
        margin-left:-15px;
    }
}

我想知道我可以采取哪些其他方法来仅针对 IPAD。

谢谢

Answer 1

针对 iPad 使用以下媒体查询

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

本网站提供了 iPad 中各种设备的详细信息

CSS media Queries for iPad