Question

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

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

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

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

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

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

navigator.userAgent.indexOf("iPhone")

但我需要确切地知道模型

Answer 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 */
}

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

Answer 2

只需使用：

 $(window).height();

阅读here

检查移动设备分辨率高度的最佳方法

2 个答案: