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

このコードで multipal デバイスの高さを設定してください。

于 2013-11-20T10:16:04.283 に答える
0

これを使用するだけです：

 $(window).height();

ここを読む

于 2013-11-20T10:20:14.183 に答える