web-dev-qa-db-ja.com

iPadは垂直から水平へのサイズ変更イベントをトリガーしませんか？

誰かがこの動作に気づいたことがありますか？サイズ変更時にトリガーされるスクリプトを記述しようとしています。通常のブラウザでは正常に機能し、iPhoneでは正常に機能しますが、iPadでは、水平から垂直のビューポートへの移行のみがトリガーされ、その逆はトリガーされません。

これがコードです：

$(window).resize( function() {

    var agent=navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone') != -1));
    var is_ipad = ((agent.indexOf('ipad') != -1));

    if(is_iphone || is_ipad){
        location.reload(true);
    } else {     
        /* Do stuff. */
    };
});
javascriptiphoneipadresizeweb-applications
35
dclowd9901

私があなたを正しく理解していれば、ユーザーがiPadを傾けたときに何かをしたいと思います。どうぞ：

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){

        // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

}

The left picture shows portrait mode, the right one landscape mode

46
Vincent

私はあなたが望むものは次のように見える iPadオリエンテーションCSS を使うことだと思います：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

また、orientationchangeイベントは、方向が変更されたときに発生します iPad Web開発のヒント 。

これにより、変更に対処するのに十分なツールが提供されます。

14
artlung

これにはすべての向きが含まれます。

2つのオプションがあります。

window.onorientationchange = function() {

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0) {
    // iPad is in Portrait mode.

    } else if (orientation === 90) {
     // iPad is in Landscape mode. The screen is turned to the left.

    } else if (orientation === -90) {
     // iPad is in Landscape mode. The screen is turned to the right.

    } else if (orientation === 180) {
    // Upside down portrait.

    }
}

または

// Checks to see if the platform is strictly equal to iPad:
    if(navigator.platform === 'iPad') {
            window.onorientationchange = function() {

            var orientation = window.orientation;

            // Look at the value of window.orientation:

            if (orientation === 0) {
            // iPad is in Portrait mode.

            } else if (orientation === 90) {
             // iPad is in Landscape mode. The screen is turned to the left.

            } else if (orientation === -90) {
             // iPad is in Landscape mode. The screen is turned to the right.

            } else if (orientation === 180) {
            // Upside down portrait.

            }
          }       
        }
7
user1149756

Appleから見つけた唯一のもの ：

IPadのSafariおよびiPhoneのSafariには、サイズ変更可能なウィンドウがありません。 iPhoneおよびiPadのSafariでは、ウィンドウサイズは画面のサイズに設定され（Safariユーザーインターフェイスコントロールを除く）、ユーザーは変更できません。 Webページ内を移動するには、ユーザーがダブルタップまたはピンチしてズームインまたはズームアウトするか、タッチしてドラッグしてページをパンすることで、ビューポートのズームレベルと位置を変更します。ユーザーがビューポートのズームレベルと位置を変更すると、固定サイズの表示可能なコンテンツ領域（つまり、ウィンドウ）内で変更されます。つまり、ビューポートに「固定」された位置にあるWebページ要素は、画面外の表示可能なコンテンツ領域の外側に配置される可能性があります。

「iPhoneで機能する」という部分は理解しました...しかし、もう機能しないのでしょうか？これは、最新の公開iPhone OSリリースが出荷されてからのOS /モバイルSafariの変更である可能性があります（上記のドキュメントは2010年3月のものです）。

IPhoneを追加して、この質問のタグを付け直します。多分、開発者4.0 OSリリースを持つ人の1人がこれをテストできますか？それが削除された場合は、バグが発生する前に提出または修正する必要があります... Appleを使用した場合の手順はわかりません）.

1
Nick Craver

iphoneとipadの向きのバグのこの修正が必要です。ここで読んでください： http://www.blog .highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug /

こちらのgithub最新バージョン： https://Gist.github.com/901295 ページの2番目のバージョンを使用します。

1
B-Money

IOSのバージョンを確認してください。

「orientationchange」イベントはiOS 3. *では機能しませんが、4。*では機能します。

0
JoeDuncan
  1. お使いのプラットフォームがiPadかどうかを確認します。

  2. window.onorientationchangeをキャッチして、iOS固有のイベントの方向変更を処理します。

    if(navigator.platform == 'iPad') {
    window.onorientationchange = function() {
        // handle orientationchange event
        // (here you can take advantage of the orientation property
        //     - see the good answer above by Vincent)
    }       
}
0
SteakOverflow