JavaScript IF函数识别移动设备

JavaScript IF function to recognise mobile device

本文关键字：移动 识别 IF 函数 JavaScript      更新时间：2023-09-26

我目前正在创建一个网站，我有一个粘固定头。这个网站是建立在Bootstrap上的，但是因为我真的不喜欢很多Bootstrap头，我决定自己做一个简单的。

http://quarndoncurtaindesign.besaba.com/

粘头在一些小问题上工作得很好。但在手机领域，情况就完全不同了。由于标题在垂直方向上占据了大量的空间，它在移动设备上占据了太多的空间。

我决定最好让菜单保持在它的粘着状态，但是我使用这个Javascript在一些元素上添加了一个"粘着"类，这样我就可以在CSS中定位它了。

   $(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
    $('header h1').addClass("sticky");
    $('p#tagline').addClass("sticky");
    $('ul').addClass("sticky");
    $('a').addClass("sticky");
    $('#top').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
    $('header h1').removeClass("sticky");
    $('p#tagline').removeClass("sticky");
    $('ul').removeClass("sticky");
    $('a').removeClass("sticky");
    $('#top').removeClass("sticky");
  }
});
如果你能给我指路，我将不胜感激。

像这样使用JS是很好的实践。通过将类添加到元素中，您可以使用CSS来定位元素。

然而，你的方法有几个问题。

你只需要在标题中应用'sticky'类。我看不出你有什么理由需要在页面上的任何其他元素上应用sticky类。

像这样的代码应该可以达到这个效果:

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
body {
    padding-top: 100px /* Height of header.*/
                       /*This will offset the content below the header */
}

另外，我不认为你甚至需要一个JS if语句在这里，因为头将始终是粘性的。

如果你在移动视图上有问题，那么你应该使用媒体查询来纠正标题

下面的内容的偏移量

在这种情况下，您可能会从CSS媒体查询中获得比JS代码更多的价值。他们将允许你识别设备-除其他外-他们的屏幕大小，并为不同的设置指定不同的布局。

我同意前两个答案，这是一个最适合CSS和/或CSS媒体查询的用例。

但是，如果您仍然希望使用JavaScript检测用户是否在移动设备上，则可以使用以下代码(或以下代码的变体):

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}
^此代码片段取自https://stackoverflow.com/a/3540295/1525109
相关文章：