如果屏幕低于480像素，则阻止Javascript继续执行功能

Question

首先，我不是一个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>

Answer 1

你可以试试这个： -

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

Answer 2

要获得所有浏览器的精确高度和宽度是非常重要的因为IE，但不用担心所有浏览器的解决方案，包括IE 6到最新。

这是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;
}

这将帮助您在任何浏览器中获得准确的高度，这样您就可以应用逻辑。 希望这有帮助!!!

Answer 3

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

$.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 。

Answer 4

你可以做

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
}