モバイルアプリケーションのページの向きが横から縦に変更されたり、逆の場合にCSSのファイルを変更する最適な方法は何ですか?私はAndroidとiPhoneの両方をサポートする必要があります。それはメディアのクエリが他のアイデア、最もクリーンな方法ではないようですか?モバイルオリエンテーションに基づいてCSSを変更する
答えて
は私のために最善を動作しているようです...結合の例はしませんでした。詳細については
$(document).ready(function() {
$(window).resize(function() {
alert(window.orientation);
});
});
window.onorientationchangeイベントを使用できます。
まず、スタイルシートに次の行を追加します。id = "cssElement"または何か。
が続いてjQueryの使用:jQueryのコードの下に
$(document).ready(function(){
// The event for orientation change
var onChanged = function() {
// The orientation
var orientation = window.orientation;
if(orientation == 90) {
$('#cssElement').attr('href', '/path/to/landscape.css');
} else {
$('#cssElement').attr('href', '/path/to/portrait.css');
}
};
// Bind the orientation change event and bind onLoad
$(window).bind(orientationEvent, onChanged).bind('load', onChanged);
});
私は 'window.orientation'は文字列ではなく数字であると思いました。 – icktoofay
onChangedイベントは、Safariモバイルブラウザからは一度も起動しません。 – c12
^^ icktoofayあなたは正しいです(固定)。私は間違って何かを読んだ。とにかく、これは/電話のブラウザでは動作するはずです。 – SublymeRick
例
/* For portrait */
@media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
/* For landscape */
@media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
}
- 1. SVGモバイルオリエンテーションの変更
- 2. .cssファイルに基づいてロゴを変更するには、
- 3. CSSスタイルのバインディングに基づいてaria-labelを変更する
- 4. ページ幅に基づいてCSSライブを変更する
- 5. CSSのブラウザサイズに基づいて背景色を変更する
- 6. Javascriptに基づいてCSSを変更しますか?
- 7. CSSの背景イメージ、ビューポートに基づいてサイズ変更
- 8. クエリ文字列パラメータに基づいてCSSクラスを変更する方法
- 9. 条件に基づいてCSSクラスプロパティを変更する(角度2のngIf)
- 10. html要素の内容に基づいてCSSスタイルを変更する
- 11. 子要素の値に基づいて親要素のCSSを変更する
- 12. xmlhttp.responseTextに基づいてCSSスタイルを変更してください
- 13. 値に基づいてボタンCSSを変更してください
- 14. jQueryのCSSクラスに基づいて変数を設定する
- 15. コンテナの高さに基づいた要素のサイズ変更CSS
- 16. selectlyputに基づいてグラフのy変数を変更する
- 17. 変数に基づいて行の背景を変更する
- 18. CSSサイズに基づいてフラッシュオブジェクトのサイズを変更しますか? ColdFusion CFCHART CFDIV
- 19. Railsの現在のページに基づいてCSSを変更しますか?
- 20. PHPの文字列クエリに基づいてCSSを変更します
- 21. CSS:現在の色に基づいてフォントの色を変更します
- 22. jQuery:インラインスタイルの幅に基づいてCSSの色を変更します
- 23. cssのCSS設定に基づいてグラデーションを生成する#
- 24. JRadioButtonに基づいてJPanelを動的に変更する
- 25. clickとAddEventListenerに基づいてhrefを変更するには
- 26. URLに基づいてOutputCacheを変更する
- 27. jQueryでAJAX結果に基づいてDOMを変更する
- 28. 現在の `filetype`に基づいて` filetype`を変更する
- 29. トリガーボタンに基づいてモーダルコンテンツを変更する - タイトルとビデオ
- 30. Meteor/React:ログインステータスに基づいて状態を変更する
は、イベントのサイズを変更するウィンドウに結合するいずれかのオプションがありません、そしてXが大きければ、それは風景であるY参照してください?そしてYは大きくなり、Xは肖像画を手に入れましたか? 1 varをboolean、isLandscapeとして保存し、変更されている場合はスタイルシートを編集しますか? – Niels
CSSのメディアクエリがクリーンな解決策ではないと思うのはなぜですか? –