Iphone 如何检测响应设计的屏幕高度

Iphone 如何检测响应设计的屏幕高度,iphone,css,responsive-design,Iphone,Css,Responsive Design,我正在建设一个网站的响应设计 我有一个特定的CSS样式,如下所示: /* when viewport height less than 320px */ @media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */ #footer { font-size: 65%; line-height: 110%; margin-top:

我正在建设一个网站的响应设计

我有一个特定的CSS样式,如下所示:

/* when viewport height less than 320px */
@media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */

    #footer {
        font-size: 65%;
        line-height: 110%;
        margin-top: 12px;
    }

}

我在iPhone上以横向模式对其进行了测试,字体大小没有变为65%,这3种样式中的任何一种也没有生效。这是检测iPhone屏幕高度尺寸的有效且正确的方法吗?

jQuery

$(document).ready(function(){
   if($(document).width() <= 320){
      $("#footer").addClass("newclass")
   }
})

您可以尝试使用其他媒体查询吗

我从来没有遇到过媒体质疑的问题。通过在线iPhone模拟器在纵向和横向模式下测试网站后,字体大小设置为65%:

但是,如果上面的媒体查询不起作用,是否可以尝试更改视口

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">


您是将此代码放在常规CSS之前还是之后?是的,在级联中,这是我拥有的最后一个样式块。就在它上面,我有一个iPhone肖像的最大宽度样式,它工作得很好。如果它有不同,我有一个iPhone 4,你可以把整个代码发布在JSFIDLE上,或者更好,给网站链接?您可能缺少一个括号。我将获得一个登录面板。你是说主页吗?你链接到主页/OMSSo@Enve,你是说我不能在我的CSS中使用
@媒体屏幕和(最大高度:319px){}
?它是CSS3,不支持所有浏览器在iphone上使用IE7和IE8的浏览器?Safari中的iPhone4呢?这就是风格的目标。我认为jQuery是最好的方式。您还向您的站点添加了jquery。您发送给@JohnSmith的链接的有趣之处在于,它们都没有使用“最大高度”属性。他们确实使用方向:风景。也许我应该试试。如果是纵向/横向问题,您可能需要更改视口。总的来说,如果这些都不起作用,我就被难住了。我尝试的每一个“把戏”,你建议的或发送的链接,都会在我的浏览器上起作用。当我使用实际的iPhone时,它不起作用。我也被难倒了,但谢谢你的帮助@JohnSmith!
@media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
}
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">