4

まず第一に、私はjavascriptの専門家ではありません。特定のJavaScriptを条件付きで実行する方法を理解しようと夢中になっています。私はJQueryを使用して、ブロックをブラウザーページの中央に配置していますが、画面サイズが480pxより大きい場合に限ります（つまり、このスクリプトをスマートフォンで実行したくない場合）。CSSメディアクエリを使用してリクエストを示しています。つまり、このスクリプトはすべてのスマートフォン、Safari 5以降、IE10、Firefox 13で正常に機能しますが、IE6-9およびOpera 12では機能しません（私が理解している限り、これらはトランジションをサポートしていません）。誰かが私が間違っていることを理解するのを手伝ってくれますか？そして、これを行うためのより良い方法がある場合はどうなりますか？（CSSで@mediaクエリを試しましたが、スクリプトは何があっても実行され続けます）...本当に助けていただければ幸いです。

    <script>
    if (matchMedia('only screen and (max-device-width:800px) and ' + '(orientation: portrait)').matches) {
        // smartphone/iphone... maybe run some small-screen related dom scripting?
        event.preventDefault(); 
    } else{


        //Absolute Content Center
        function CenterItem(theItem){
            var winWidth=$(window).width();
            var winHeight=$(window).height();
            var windowCenter=winWidth/2;
            var itemCenter=$(theItem).width()/2;
            var theCenter=windowCenter-itemCenter;
            var windowMiddle=winHeight/2;
            var itemMiddle=$(theItem).height()/2;
            var theMiddle=windowMiddle-itemMiddle;
            if(winWidth>$(theItem).width()){ //horizontal
                $(theItem).css('left',theCenter);
            } else {
                $(theItem).css('left','0');
            }
            if(winHeight>$(theItem).height()){ //vertical
                $(theItem).css('top',theMiddle);
            } else {
                $(theItem).css('top','0');
            }
        }
        $(document).ready(function() {
            CenterItem('.content');
        });
        $(window).resize(function() {
            CenterItem('.content');
        });
    } //end of "else" (normal execution)

</script>
4

4 に答える 4

2

あなたはこれを試すことができます：-

<script>
    var screenWidth = screen.width;

    if (screenWidth > 480 ) {

    //Absolute Content Center
    function CenterItem(theItem){
        var winWidth=$(window).width();
        var winHeight=$(window).height();
        var windowCenter=winWidth/2;
        var itemCenter=$(theItem).width()/2;
        var theCenter=windowCenter-itemCenter;
        var windowMiddle=winHeight/2;
        var itemMiddle=$(theItem).height()/2;
        var theMiddle=windowMiddle-itemMiddle;
        if(winWidth>$(theItem).width()){ //horizontal
            $(theItem).css('left',theCenter);
        } else {
            $(theItem).css('left','0');
        }
        if(winHeight>$(theItem).height()){ //vertical
            $(theItem).css('top',theMiddle);
        } else {
            $(theItem).css('top','0');
        }
    }
    $(document).ready(function() {
        CenterItem('.content');
    });
    $(window).resize(function() {
        CenterItem('.content');
    });
}

</script>
于 2012-06-20T09:23:41.223 に答える
2

IEのおかげで、すべてのブラウザーで正確な高さと幅を取得することは非常に重要ですが、IE6から最新までのすべてのブラウザーの解決策は心配ありません。

これらの2つの機能は次のとおりです。

     if (matchMedia('only screen and (max-device-width:800px) and ' + '(orientation: portrait)').matches) {
        // smartphone/iphone... maybe run some small-screen related dom scripting?
        event.preventDefault(); 
    } else{


        //Absolute Content Center

        $(document).ready(function() {
            CenterItem('.content');
        });
        $(window).resize(function() {
            CenterItem('.content');
        });
    } //end of "else" (normal execution)



function CenterItem(theItem){
                  var winWidth=getWindowWidth();
                  var winHeight=getWindowHeight();
                  var windowCenter=winWidth/2;
                  var itemCenter=$(theItem).width()/2;
                  var theCenter=windowCenter-itemCenter;
                  var windowMiddle=winHeight/2;
                  var itemMiddle=$(theItem).height()/2;
                  var theMiddle=windowMiddle-itemMiddle;
                  if(winWidth>$(theItem).width()){ //horizontal
                      $(theItem).css('left',theCenter);
                  } else {
                      $(theItem).css('left','0');
                  }
                  if(winHeight>$(theItem).height()){ //vertical
                      $(theItem).css('top',theMiddle);
                  } else {
                      $(theItem).css('top','0');
                  }
              }

function getWindowHeight() {
  var myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {

    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

    myHeight = document.body.clientHeight;
  }
  return myHeight;
}
function getWindowWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {

    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

これにより、任意のブラウザで正確な高さを取得できるため、ロジックを適用できます。この助けを願っています!!!

于 2012-06-20T09:24:18.727 に答える
2

最も簡単なことは、メディアクエリが一致しない場合にイベントハンドラーをアタッチしないことです。

$.fn.extend({
    centerItem: function () {
        return this.each(function () {
            var $this   = $(this),
                hCenter = ( $(window).width() - $this.width() ) / 2,
                vCenter = ( $(window).height() - $this.height() ) / 2;

            $this.css({
                left: hCenter > 0 ? hCenter : 0,
                top:  vCenter > 0 ? vCenter : 0
            });
        });
    }
});

$(function() {
    var bigScreen = 'only screen and (max-device-width:800px) and (orientation: portrait)';

    if ( matchMedia(bigScreen).matches ) {
        $(window).resize(function() {
            $('.content').centerItem();
        });
    }
});

ノート

  • $()を置き換え$(document).ready()ます。http://api.jquery.com/ready/を参照してください
  • 慣例により、オブジェクトコンストラクターのみが大文字で始まるため、CenterItem()実際には関数を呼び出す必要がありますcenterItem()。
  • 私はあなたの関数をjQueryプラグインに変えました。もちろん、混乱を招く場合は、独自の実装を引き続き使用できます。
  • この.css()関数はオブジェクト引数を取ることができるため、1つのステップで複数のCSSプロパティを設定できます。
  • expression ? ifTrue : ifFalseの代わりに三項演算子（）を使用しましたif。
于 2012-06-20T09:40:22.183 に答える
1

できるよ

window.innerHeight
window.innerWidth

ビューポートの寸法を取得します。今、あなたはすることができます：

var width = window.innerWidth
if (width > 480){
      /* do desktop stuff*/
}

別の方法として、UserAgentStringおよび/またはOperatingwith：を使用することもできます。

window.navigator

（より信頼性の高いDetect-script）

ただし、状況によっては、どちらの試行も失敗する可能性があります。

match-media編集：あなたがあなたの関数を投稿したならいいでしょう。

edit2：ビューポートを正しく検出するためのスクリプトを使用してください：https ：//stackoverflow.com/a/2035211/1047823

次に、コードを変更します。

if ( getViewport()[0] < 480 ) {
        // smartphone/iphone... maybe run some small-screen related dom scripting?
        event.preventDefault(); 
    } else{
        // your desktop code
}
于 2012-06-20T09:15:13.847 に答える