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

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

来源

2012-12-29 H. Ferrence

您是否在常规CSS之前或之后放置此代码？ – Blender

是的，在级联中，这是我拥有的最后一个样式块。就在它上面我有一个iPhone的肖像最大宽度的风格，它工作正常。 –

如果它有所作为我有一个iPhone 4 –

您可以尝试使用不同的媒体查询？

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;">

来源

2012-12-29 18:45:28

你发给我的链接@JohnSmith的有趣之处在于它们都不使用max-height属性。他们确实使用方向：风景。也许我应该尝试一下。 –

如果是纵向/横向问题，您可能需要更改视口http://chriscoyier.net/2009/01/25/iphone-meta-tag-for-viewport-maintaining-scale-on-orientation-change/ 。总的来说，如果这些都不起作用，我很难过。 –

我尝试了你的建议或发送了一个链接的每一个“诀窍”，都适用于我的浏览器。当我去实际的iPhone它不工作。我也很难过，但是谢谢你帮助@JohnSmith！ –

jQuery的

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

CSS

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

来源

2012-12-29 18:38:32 Enve

So @Enve，你是说我不能在我的CSS中使用@media screen和（max-height：319px）{}'？ –

这是CSS3，并且不支持在iPhone上使用IE7和IE8的所有浏览器 – Enve

？ –

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

回答

相关问题