ウェブアプリでiPhone用画面の向きを制御する方法
-
18-09-2019 - |
質問
私は(SO評判グラフのために使用するものに似ている)canvas
ベースのグラフを作成するためにFLOTを使用して非常に基本的なWebページを持っています。
PCのディスプレイの場合には、幅(x軸)は1.6倍の高さであると、通常出力、単にべきである。
しかし、むしろ「ポートレート」向きであふれ、それを持つよりも、ページはPCユーザーとしてチャートを見て自分の携帯電話を回すを促す(または強制)、横向きにデフォルト設定ならばiPhoneのために、私はそれをしたいと思いだろうます。
だから私の質問があります:
1)(キャンバスを持って縦向きの検出に90度回転する)、JS、または単にHTMLのheadタグをCSSを使用した方法はありますか?
2)の方法にかかわらず、それを見ている人の、要素/オブジェクトを回転させるために、一般的には、ありますか?
3)デバイスを回転させたとき、コンテンツを回転させるiPhoneのデフォルトの動作を回避する方法はありますか?もちろん私は、ユーザーがそれが横を示していることを見て時にデバイスを回転させるようにしたいが、私はグラフが裏返しとまだ彼らは携帯電話の電源を入れたときに横になりたくない、電話を反転し続けるためにそれらをからかっとなったことがありませんまだ保持する。
グラフありがとうございます。
解決
このような何かます。
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0:
document.body.setAttribute("class","portrait");
break;
case 90:
document.body.setAttribute("class","landscapeLeft");
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
document.body.setAttribute("class","landscapeRight");
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
他のヒント
1/2)あなたは-web-transform
を試してみましたか?この Appleのウェブページを参照してください。
3)私は
あなたが自動回転を阻害しないことができると思います他のオプションは、次のコードを使用してCSSを標的とすることである。
/* Portrait */
@media screen and (max-width: 320px){
/* Place your style definitions here */
}
/* Landscape */
@media screen and (min-width: 321px){
/* Place your style definitions here */
}
所属していません StackOverflow