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和IPhones。对于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

IPAD的CSS样式无效

1 个答案: