4

首先，我不是 javascript 专家。我正在疯狂地试图弄清楚如何有条件地执行某个 javascript。我正在使用 JQuery 将我的块绝对居中在浏览器页面中，但前提是屏幕尺寸大于 480 像素（换句话说，我不希望此脚本在智能手机上运行）。我正在使用 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

如果媒体查询不匹配，最简单的事情是不附加事件处理程序。

$.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()函数可以接受一个对象参数，因此您可以一步设置多个 CSS 属性。
  • 我已经使用三元运算符 ( expression ? ifTrue : ifFalse) 来替换if.
于 2012-06-20T09:40:22.183 回答
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，要在所有浏览器中获得准确的高度和宽度是相当重要的，但不用担心是所有浏览器的解决方案，包括 IE 6 到最新版本。

这是这两个功能：

     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 回答
1

你可以做

window.innerHeight
window.innerWidth

获取视口的尺寸。现在你可以这样做：

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

作为替代方案，您可以使用 UserAgentString 和/或操作：

window.navigator

（更可靠的检测脚本）

但是，在某些情况下，任何一种尝试都可能失败。

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 回答