jquery mobile固定ヘッダーフッターの下のタブページのスケールの問題
2895 ワード
背景:クライアントはphonegapを使用して開発し、jquery mobile 1を選択した.4.2+html 5+css 3の技術実装.ページには3つのタブページ(tabページは自分で書いたdiv)があり、左右にスライドしてページを切り替えることができます.携帯電話のページ情報のフォントが表示されすぎて、観感に影響しますが、いくつかの情報を拡大して見たい場合はどうすればいいですか?ページ全体をズームしたいので、次の処理を行いました.
1.metaに以下の情報を加える
user-scalable=yesは、ページがスケール可能であることを示します.
maximum-scaleは最大の割合が1.2倍であることを示す
2.ヘッダーでfooterが加入
Data-disable-page-zoom=「false」は、ユーザーがページをスケールする能力があるかどうかを示す
第1段階の結論:1ページのページはページのスケールを行うことができて、問題はありません
質問の出現:私のページには3つのtabページがあるので、左右にスライドしてtabページを切り替えます.ページが拡大されると、ページが左右にスライドしてこそ拡大して隠された領域が見えますが、左右にスライドする操作はすでに切り替えページを縛っているので、スライドすると次のtabページにページが切り替えられます.どうすればいいですか.
解決策:現在のページのスケールを判断し、あるスケールを超える場合は、「ページのスケールを元に戻してから、タブページを切り替えてください」とヒントを与え、そうでない場合はページを切り替えます.
以上が私の解決策で、もっと良い方法があるかもしれませんが、しばらくは考えられませんでした.
ページのスケールを判断する2つのコンポーネントを共有します.
海外:http://tombigel.github.io/detect-zoom/
国内の:上の海外の友达のコードを参考にして書いたのですが、https://github.com/zxlie/zoom-detect
この友达のウェブサイト:http://www.baidufe.com/component/zoom-detect/index.html
1.metaに以下の情報を加える
user-scalable=yesは、ページがスケール可能であることを示します.
maximum-scaleは最大の割合が1.2倍であることを示す
<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=1.2" />
2.ヘッダーでfooterが加入
Data-disable-page-zoom=「false」は、ユーザーがページをスケールする能力があるかどうかを示す
<div id="tabs" data-role="header" data-disable-page-zoom="false" data-position="fixed">
<div data-role="footer" data-position="fixed" data-disable-page-zoom="false">
第1段階の結論:1ページのページはページのスケールを行うことができて、問題はありません
質問の出現:私のページには3つのtabページがあるので、左右にスライドしてtabページを切り替えます.ページが拡大されると、ページが左右にスライドしてこそ拡大して隠された領域が見えますが、左右にスライドする操作はすでに切り替えページを縛っているので、スライドすると次のtabページにページが切り替えられます.どうすればいいですか.
解決策:現在のページのスケールを判断し、あるスケールを超える場合は、「ページのスケールを元に戻してから、タブページを切り替えてください」とヒントを与え、そうでない場合はページを切り替えます.
<script>
var zoom ='';
//500
setInterval(function(){
// window.orientation : ,0 , 90 ( )
//screen.width
var deviceWidth = (Math.abs(window.orientation) == 90) ? screen.height : screen.width;
// Firefox、Chrome、Safari、Opera ; window.innerWidth
zoom = deviceWidth / window.innerWidth;
},500)
$(function() {
//#page div id
$("#page").on("swipeleft",function(){
if (zoom>1.05){// 1.05, ,
alert(' , ');
return false;
}
// , 。。。。
});
$("#page").on("swiperight",function(){
if (zoom>1.05){
alert(' , ');
return false;
}
// , 。。。。
});
})
</script>
以上が私の解決策で、もっと良い方法があるかもしれませんが、しばらくは考えられませんでした.
ページのスケールを判断する2つのコンポーネントを共有します.
海外:http://tombigel.github.io/detect-zoom/
国内の:上の海外の友达のコードを参考にして書いたのですが、https://github.com/zxlie/zoom-detect
この友达のウェブサイト:http://www.baidufe.com/component/zoom-detect/index.html