0

我有表单页面HTML5。页面太大所以我加了一个滚动条：jquery.nicescroll

<div>我用iPhone 4包装表单height:480px并运行niceScroll构造函数。

<div id = "scroller"> 
<form>
..
...
......
</form>
</div>

<script>
$('#scroller').niceScroll(); 
</script>

它工作正常，但问题是我应该给每个设备他自己的高度：（height-40px）所以它在设备上看起来不错。例如：iPhone4 高度：480px，iPhone5：568px，Samsung S2 533 等。

检查设备高度值的最佳方法是什么，以便之后我可以使用它？现在我可以通过以下方式检查设备公司userAgent：

navigator.userAgent.indexOf("iPhone")

但我需要确切地知道模型

4

2 回答 2

1 
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

请在此代码中设置多设备高度。

于 2013-11-20T10:16:04.283 回答
0

只需使用这个：

 $(window).height();

在这里阅读

于 2013-11-20T10:20:14.183 回答