2

私はモバイル Web アプリに取り組んでいます。縦向きモードのアプリは、横向きモードとは異なる外観にする必要があります。これが、次のコードを書いた理由です。

function orientation(){
    if (window.innerHeight > window.innerWidth) {
        $('.ui-page').removeClass("pageL").addClass("pageP");
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=400,user-scalable=no')
        $(window).resize();
        alert('portrait');
    } else {
        $('.ui-page').removeClass("pageP").addClass("pageL");
        $('meta[name="viewport"]').attr('content', 'initial-scale=1, maximum-scale=1');
        $(window).resize();         
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=960,user-scalable=no');
        $(window).resize();
        alert('landscape');
    };
};  

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    orientation();
}, false);

Android タブレットではすべてが Chrome で動作しますが、iPad と Android のデフォルト ブラウザでは動作しません。デフォルトの Android ブラウザーでは、たとえば縦向きでページを読み込んでタブレットを 90 度回転すると、機能が再度実行されますが、それでも彼は縦向きであると表示されます。iPad ではすべてが機能しますが、横向きにすると再びズームアウトしません。iPad の問題は、iPad のリサイズ機能が無効になっていることが関係していると思われますが、解決できません。

一部の Android デバイスでは横向きが 0 度と見なされ、縦向きが 0 度と見なされるため、innerHeight と Width を使用します。

4

1 に答える 1

0

stackoverflow を何度もブラウジングした後、このコードを作成することができました。

function orientation() {
  var content_width, screen_dimension;

  if (window.innerHeight > window.innerWidth) {
    // portrait
    $('.ui-page').removeClass("pageL").addClass("pageP");
    content_width = 400;        
    if(screen.width < screen.height){screen_dimension = screen.width * 0.9}
    else{screen_dimension = screen.height * 0.9}
  } else{
    // landscape
    $('.ui-page').removeClass("pageP").addClass("pageL");
    content_width = 960;
    if(screen.width > screen.height){screen_dimension = screen.width}
    else{screen_dimension = screen.height}
  }

  var viewport_scale = screen_dimension / content_width;

  // resize viewport
  $('meta[name=viewport]').attr('content',
    'height=device-height, width=' + content_width + ',' +
    'minimum-scale=' + viewport_scale + ', maximum-scale=' + viewport_scale);
}

var supportsOrientationChange = "orientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    orientation()
}, false);

$(document).bind("pageinit",function(){
    orientation()
}).trigger('pageinit');

今回は、私がテストしたすべてのブラウザー (Android と iOS) でほぼすべてが機能します。残っている唯一の問題は iOS にあります。入力フィールドをクリックすると、向きが魔法のように変わります。

于 2012-11-29T09:24:34.673 に答える