非常に奇妙なバグに遭遇したようです。PhoneGap を使用して Windows Phone 8 用のアプリを作成しています。私が抱えている問題は、div使用すると機能するスクロール可能であることです:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=480, width=320, target-densitydpi=device-dpi" />
（私は、を使ってみましheight=device-heightた、width=device-widthすべてうまくいきました）
ただし、ビューポート メタ タグを削除して、代わりにこれを使用すると:
@-ms-viewport {
width:320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
すべてが同じように見えますが、divスクロールできなくなりました。
-ms-viewportポートレートとランドスケープのビューポートの幅/高さを変更したいので、メディアクエリに入れるので、使用する必要があります。
メタ タグを削除/再挿入して、メタ タグのcontent値を jQuery で変更しようとしましたが、実行時にビューポートが更新されません。
ページ全体の HTML は次のとおりです。問題を再現したい場合は、IE10 モバイルで使用する必要があります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="msapplication-tap-highlight" content="no"/>
<script type="text/javascript" src="./cordova-2.3.0.js"></script>
<script type="text/javascript" src="./js/jquery-190.js"></script>
<script type="text/javascript" src="./js/jquery.transit.min.js"></script>
<style>
@-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
user-select: none;
}
body {
background-color: red;
color: white;
-ms-text-size-adjust: none;
-ms-user-select: none;
}
.window_wrapper {
position: relative;
background-color: yellow;
width: 90%;
height: 90%;
overflow: auto;
}
.test {
width: 50%;
height: 500px;
overflow: hidden;
position: absolute;
background-color: silver;
z-index: 3000;
}
#ll {
position: absolute;
bottom: 0px;
}
</style>
<title>An App...</title>
</head>
<body>
<div class="window_wrapper">
<div class="test">
first line
<br />
<div id="ll"> last line </div>
</div>
</div>
</body>
</html>