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

【问题标题】：How to Detect Screen Height for Responsive Design如何检测响应式设计的屏幕高度
【发布时间】：2012-12-14 14:31:20
【问题描述】：

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

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

【问题讨论】：

您是将此代码放在常规 CSS 之前还是之后？
是的，在级联中，这是我拥有的最后一个样式块。在它的正上方，我有一个用于 iPhone 肖像的最大宽度样式，它工作正常。
如果有什么不同的话，我有一部 iPhone 4
你能把整个代码贴在 jsfiddle 上还是更好的，给网站链接？您可能缺少括号。
我得到了一个登录面板。你是说主页吗？您链接到主页/OMS

标签： iphone css responsive-design

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

【讨论】：

你发给我的链接的有趣之处在于@JohnSmith 没有一个使用 max-height 属性。他们确实使用方向：风景。也许我应该试试。
如果是纵向/横向问题，您可能需要更改视口chriscoyier.net/2009/01/25/…。总的来说，如果这些都不起作用，我很难过。
我尝试的每一个你建议或发送链接的“技巧”都适用于我的浏览器。当我使用实际的 iPhone 时，它不起作用。我也很难过，但感谢@JohnSmith 的帮助！

【解决方案2】：

jQuery

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

CSS

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

【讨论】：

那么@Enve，你是说我不能在我的CSS中使用@media screen and (max-height: 319px) {}吗？
它是 CSS3，并非所有浏览器都支持
谁在 iphone 上使用 IE7 和 IE8？
iPhone4 在 Safari 中怎么样？这就是风格所针对的。
我认为 jQuery 是最好的方法。您还添加了 jquery 到您的网站