jQueryモバイルランドスケープとポートレートクラス
-
27-09-2019 - |
質問
JQuery Mobile Frameworkを使用し始めましたが、ランドスケープやポートレートクラスを使用してスタイルを整理することはできないようです。
ドキュメントは言っています
HTML要素には、ブラウザまたはデバイスの向きに応じて、常に「ポートレート」または「ランドスケープ」のクラスがあります。
だから私はその印象を受けています <h1>foo</h1>
どちらかです <h1 class="landscape">foo</h1>
また <h1 class="portrait">foo</h1>
まだ h1.landscape { font-size:16px; }
と h1.portrait { font-size:9px; }
うまくいかないようです。
誰かがこれに光を当てることができれば、それは大歓迎です。
解決
わかった。私は何が起こっているのかを見ることにし、Curlを使用してAndroidビューを介してソースコードを取得しました。
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.actwebdesigns.co.uk');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2');
$html = curl_exec($ch);
echo $html;
ランドスケープまたはポートレートクラスを持っている唯一の要素は、HTMLタグです。
<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></html>
また、フレームワークがローテーションでクラスを自動化しないことに気づいたので、テストした次のコードが機能しました。
<script type="text/javascript">
$(window).resize( function(){
$('html').toggleClass('landscape, portrait');
});
</script>
欠陥がある上記を廃棄します。
<script type="text/javascript">
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
var ob = $('html');
if( width > height ) {
if( ob.hasClass('portrait') ) {
ob.removeClass('portrait').addClass('landscape');
}
}else{
if( ob.hasClass('landscape') ) {
ob.removeClass('landscape').addClass('portrait');
}
}
});
</script>
からliitleを使用します トミ・ラウカネンの 上記のスクリプトは正常に機能します。
他のヒント
申し訳ありませんが、それは時代遅れです! HTML5以来、CSS3 Mediaqueriesにあります。これで、CSSのスタイルを決定できます。
@media screen and (orientation: landscape) {
h1 {
color: red;
}
#someId {
width: 50%;
}
}
@media screen and (orientation: portrait) {
h1 {
color: blue
}
#someId {
width: 100%;
}
}
ポートレートとランドスケープのクラスは、HTML要素(ページ上のすべての要素ではない)に追加されるため、CSSセレクターに最初にランドスケープ/ポートレートを探してもらいたいです。次の作品:
html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }
これをlilプラグインに入れてください
(function($){
$.fn.portlandSwitch = function ( options ) {
// redefine styles to either landscape or portrait on phone switch
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
var ob = $('html');
if( width > height ) {
if( ob.hasClass('portrait') ) {
ob.removeClass('portrait').addClass('landscape');
}
}else{
if( ob.hasClass('landscape') ) {
ob.removeClass('landscape').addClass('portrait');
}
}
});
}
})(jQuery);
$.portlandSwitch();
この関数を使用してください:
//Detect change rotation
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
alert('landscape');
$('body').addClass('landscape');
$('body').removeClass('portrait');
break;
default:
alert('portrait');
$('body').addClass('portrait');
$('body').removeClass('landscape');
break;
}
}
これは、さまざまなデバイスでテストされた完全に機能するバージョン(Phil Jackson Codeに基づく)です:)
JQuery Mobileはこれを処理していたと確信していますが、画面の向きに基づいた別の作業バージョンがありますが、これはシンプルさのために優れていると思います...
if($(window).width() > $(window).height()){
if($('body').hasClass('portrait')){
$('body').removeClass('portrait').addClass('landscape');
} else if(!$('body').hasClass('portrait')) {
$('body').addClass('landscape');
}
}
else {
if($('body').hasClass('landscape')){
$('body').removeClass('landscape').addClass('portrait');
} else if(!$('body').hasClass('landscape')) {
$('body').addClass('portrait');
}
}
これにより、ポートレートまたはランドスケープクラスが追加されます。テンプレートファイルにハードコードする必要はありません:)
ありがとう