Question

我正在建立一个响应式设计网站。

我有一定的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屏幕高度尺寸的有效方法吗？

Answer 1

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

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

@media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
}

我从未遇到过媒体查询的问题。在纵向和横向模式下通过在线iPhone模拟器测试您的网站后，字体大小设置为65％：

http://www.testiphone.com/

但是，如果上面的媒体查询不起作用，您可以尝试更改视口吗？

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

Answer 2

<强>的jQuery

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

<强> CSS

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

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

2 个答案: