jQueryMobileレイアウトにヘッダーアイテムがあります...
<div data-role="header" data-theme="b" class="textHeader">
<h3>My Text</h3>
</div>
...これはdata-position=fixedに設定されていません。これは、ユーザーが下にスクロールしたときに画面を表示してスクロールオフするように設定されています。
ただし、電話/デバイスの向きが横向きに変更されたときに修正されるようにしたいと思います。そこで、向きをテストして、属性を変更しようとします。
$(window).resize(function() { resizeCanvas() });
function resizeCanvas() {
if(window.innerHeight > window.innerWidth) //portrait
{
$(".textHeader").attr("data-position","inline");
}
else //landscape
{
$(".textHeader").attr("data-position", "fixed");
}
}
ただし、これは機能しません。
何が起こっているように見えるかは、ページがロードされるときにヘッダーが表示されることです。つまり、テストしてランドスケープブラウザにロードすると、常に修正された動作をします。しかし、私がそれをポートレートで行う場合、それは常に固定されていないままです。私が検討していることの1つは、.listview('refresh')を実行する方法と同等のものが必要ですが、ヘッダー用です。
これを機能させる方法について何か考えはありますか?