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到最新。

以下是这两个功能：

     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

（more reliable 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
}

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

4 个答案: