Media Queries移动视口无响应

时间：2018-08-10 15:51:10

标签： javascript jquery html css media-queries

我的网站有一个简单的j查询背景滑块，并且向其中添加了媒体查询，但它仍然不适合移动设备使用。它会在iPhone X上截取很多图像。您可以在手机上访问该网站，也可以准确了解我在说什么。

这里是a link！进入网站。

(function($) {
  // defaults
  $.fn.fullClip = function(options) {
    var settings = $.extend({
      current: 0,
      images: [],
      transitionTime: 1000,
      wait: 3000,
      static: false
    }, options);

    // preload images
    var i, end;
    for (i = 0, end = settings.images.length; i < end; ++i) {
      new Image().src = settings.images[i];
    }

    // sort out the transitions + specify vendor prefixes
    $('.fullBackground')
      .css('background-image', 'url(' + settings.images[settings.current] + ')')
      .css('-webkit-transition', +settings.transitionTime + 's ease-in-out')
      .css('-moz-transition', +settings.transitionTime + 'ms ease-in-out')
      .css('-ms-transition', +settings.transitionTime + 'ms ease-in-out')
      .css('-o-transition', +settings.transitionTime + 'ms ease-in-out')
      .css('transition', +settings.transitionTime + 'ms ease-in-out')

    // if only one image, set as static background
    if (settings.static) {
      $(this)
        .css('background-image', 'url(' + settings.images[settings.current] + ')');
      return;
    }

    // change the background image
    (function update() {
      settings.current = (settings.current + 1) % settings.images.length;
      $('.fullBackground').css('background-image', 'url(' + settings.images[settings.current] + ')');
      setTimeout(update, settings.wait);
    }());
  }
}(jQuery));

! function(a) {
  a.fn.fullClip = function(b) {
    var d, e, c = a.extend({
      current: 0,
      images: [],
      transitionTime: 1e3,
      wait: 3e3,
      static: !1
    }, b);
    for (d = 0, e = c.images.length; d < e; ++d)(new Image).src = c.images[d];
    return a(".fullBackground").css("background-image", "url(" + c.images[c.current] + ")").css("transition-duration", +c.transitionTime + "ms").css("transition-timing-function", "ease-in-out"), c.static ? void a(this).css("background-image", "url(" + c.images[c.current] + ")") : void
    function b() {
      c.current = (c.current + 1) % c.images.length, a(".fullBackground").css("background-image", "url(" + c.images[c.current] + ")"), setTimeout(b, c.wait)
    }()
  }
}(jQuery);
body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.fullBackground {
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.caption {
  font-size: 30pt;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caption:after {
  content: "\A";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00bbeb;
  display: inline-block;
  margin: 0 0 -2px;
}


/* ----------- iPhone 4 and 4S ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}


/* Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}


/* Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- iPhone X ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Galaxy S3 ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Galaxy S4, S5 and Note 3 ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Galaxy S6 ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Google Pixel ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Google Pixel XL ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* Portrait and Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- iPad 1, 2, Mini and Air ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .listimg {
    height: none;
  }
}


/* ----------- iPad 3, 4 and Pro 9.7" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* ----------- iPad Pro 10.5" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Landscape */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* ----------- iPad Pro 12.9" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Landscape */


/* Declare the same value for min- and max-width to avoid colliding with desktops */


/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait and Landscape */

@media (min-device-width: 800px) and (max-device-width: 1280px) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media (max-device-width: 800px) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media (max-device-width: 1280px) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Galaxy Tab S ----------- */


/* Portrait and Landscape */

@media (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .listimg {
    height: none;
  }
}


/* ----------- Nexus 7 ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Nexus 9 ----------- */


/* Portrait and Landscape */

@media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait) {
  .listimg {
    height: none;
  }
}


/* Landscape */

@media screen and (device-width: 1536px) and (device-height: 2048px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Kindle Fire HD 7" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {}


/* Landscape */

@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Kindle Fire HD 8.9" ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .listimg {
    height: none;
  }
}


/* Portrait */

@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {}


/* Landscape */

@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
  .listimg {
    height: none;
  }
}


/* ----------- Non-Retina Screens ----------- */

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {}


/* ----------- Retina Screens ----------- */

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/style.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <script src="src/fullclip.js"></script>
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#050a0b">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="theme-color" content="#ffffff">
  <title>KANAKLIFE.com</title>

  <style>
    @keyframes flickerAnimation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @-o-keyframes flickerAnimation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @-moz-keyframes flickerAnimation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @-webkit-keyframes flickerAnimation {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    .fa,
    .arm {
      -webkit-animation: flickerAnimation 13s infinite;
      -moz-animation: flickerAnimation 13s infinite;
      -o-animation: flickerAnimation 13s infinite;
      animation: flickerAnimation 13s infinite;
    }
    
    @media (max-width: 291px) {
      .fullBackground img {
        max-height: none;
        max-width: 100%;
      }
    }
    
    .fa {
      padding: 10px;
      width: 5px;
      text-align: center;
      text-decoration: none;
      margin: 5px 2px;
      position: center;
    }
    
    .fa:hover {
      opacity: 0.7;
    }
    
    .fa-envelope {
      background: none;
      color: black;
    }
    
    .fa-twitter {
      background: none;
      color: black;
    }
    
    .fa-instagram {
      background: none;
      color: black;
    }
    
    .fa-pinterest {
      background: none;
      color: black;
    }
    
    .fa-tumblr {
      background: none;
      color: black;
    }
    
    .fa-copyright {
      color: black;
    }
    
    footer {
      background-color: none;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 100px;
      width: 100%;
      overflow: hidden;
    }
    
    .priddn {
      opacity: 7;
      filter: alpha(opacity=70);
    }
  </style>
  <!-- START BODY -->

  </style>
</head>

<body>
  <span class="priddn">
            <audio  autoplay preload="auto" >

      <source src="artery/KANAKLIFECOMMEMORATION.mp3" type="audio/mpeg">
      <source src="artery/KANAKLIFECOMMEMORATION.ogg" type="audio/ogg">
      <source src="artery/KANAKLIFECOMMEMORATION.wav" type="audio/wav">
        Your browser does not support the audio element.
                </audio>

  <section class="container">
    <div class="fullBackground" style="text-align:center">
      <footer>
                        <a href="mailto:KANAKLIFE@gmx.com" class="fa fa-envelope" style="font-size:18px" ></a><a href="https://twitter.com/kanak_life" class="fa fa-twitter" style="font-size:18px"></a>
          <a href="https://www.pinterest.com/kanaklife" class="fa fa-pinterest" style="font-size:18px"></a>
          <a href="https://www.instagram.com/kanaklife_com/" class="fa fa-instagram"style="font-size:18px"></a>
          <a href="https://KANAKLIFE_com.tumblr.com" class="fa fa-tumblr" style="font-size:18px"></a><br><a href="Trademarkstorm.html" style="font-size:18px" class="fa fa-copyright"> </a>
          <span class="arm">Kanak Life Inc.</span>

  </footer>
  </div>
  </section>

  <script>
    $('.fullBackground').fullClip({
      images: ['img/1.jpg', 'img/2.jpg', 'img/3.png', 'img/4.jpg'],
      transitionTime: 2000,
      wait: 5999
    });
  </script>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36251023-1']);
    _gaq.push(['_setDomainName', 'jqueryscript.net']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
    })();
  </script>

</body>

</html>

1 个答案:

答案 0 :(得分：0)

尝试这样的媒体查询：

@media only screen and (min-width:320px) and (max-width:480px) {
.fullBackground { border:1px solid red; }

}

相关问题
最新问题