IPAD的CSS样式不起作用答案

【问题标题】：CSS Styling for IPAD not workingIPAD的CSS样式不起作用
【发布时间】：2017-03-10 09:53:33
【问题描述】：

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

@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。

谢谢

【问题讨论】：

标签： html ios css iphone ipad

【解决方案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

【讨论】：