如何檢測響應式設計的屏幕高度

我有一定的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

？ –

如何檢測響應式設計的屏幕高度

回答

相關問題