相关疑难解决方法(0)

如果使用移动浏览器隐藏DIV

如果正在使用的浏览器是移动设备,我无法操纵我的代码来隐藏一个特定的DIV.

背景故事:我正在构建一个自定义的WordPress模板,我的设计完全响应,除了一个特定的DIV,我正在使用一些悬浮技术,只是看起来不像使用触摸屏,所以我想隐藏如果用户正在使用移动设备,该部分.

我做了一些搜索,发现这个小巧的代码可以检测出浏览器是否是一个移动设备(如果确实存在,请随时指向一个更好的代码,但没有什么巨大或任何东西),我现在只是给它一个警告框告诉我它是否是移动浏览器:

<script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { alert("MOBILE DEVICE!!"); } else { alert("NOT A MOBILE DEVICE!!"); }
</script> 
Run Code Online (Sandbox Code Playgroud)

现在,我想做的就是让它基本上说:

if (mobile) { .navWrap {display: none;} }
Run Code Online (Sandbox Code Playgroud)

我知道这不是一个有效的代码,我做了一些测试,getElementById但无法弄清楚如何实现我的目标.我确实将我的.navWrap类更改为#navWrap,因此它可以被选中,getElementById但是也没有用.

那么,你们中任何一位出色的天才能帮到我吗?谢谢!

javascript css

2
推荐指数
1
解决办法
1万
查看次数

为什么 window 中的“ontouchstart”“被大多数浏览器支持”?

我正在重构别人编写的一些代码。有一个函数使用:

!!('ontouchstart' in window)
Run Code Online (Sandbox Code Playgroud)

我已经在其他项目中看到过它:https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js#L40 在 Stackoverflow 答案中: https: //stackoverflow.com/a /4819886/1127635

但它似乎可能比替代方案慢:http://jsperf.com/hasownproperty-vs-in-vs-undefined/12

那么为什么要使用这种可能较慢的替代方案呢?哪些浏览器不支持其他解决方案?

javascript dom

2
推荐指数
1
解决办法
9008
查看次数

如何检查用户是否使用javascript触摸设备(智能手机)

我想构建一个简单的Web应用程序,可以判断用户是否触摸了手机(设备).不只是屏幕,而是所有设备.所以我弄清楚如何检查用户是否触摸屏幕而不是方向和运动传感器部分.所以我发现了这段代码:

if (window.DeviceOrientationEvent) { 
  var x = document.getElementById('1'); 
  var y = document.getElementById('2');
  var z = document.getElementById('3');
  window.addEventListener('deviceorientation', function(eventData) {
        // gamma is the left-to-right tilt in degrees
        console.log(eventData.gamma);
        x.innerHTML = eventData.gamma;
        // beta is the front-to-back tilt in degrees
        console.log(eventData.beta);
        y.innerHTML = eventData.beta;
        // alpha is the compass direction the device is facing in degrees
        console.log(eventData.alpha);
        z.innerHTML = eventData.alpha;
    }, false);
}
Run Code Online (Sandbox Code Playgroud)

它向我展示了许多快速变化的数据!但当我把手机放在我的桌子上时,它会不断更改数据,就像我移动我的设备一样.那么如何检查用户是否移动了手机/设备?如果你可以帮我解决你的代码和解释,甚至可以向我展示一个我可以欣赏它的网站,我真的无法理解它!在一个完美的世界:

if(user.touchDevice){alert("YOU TOUCHED PHONE!!!");}
Run Code Online (Sandbox Code Playgroud)

非常感谢!抱歉我的英文:)

javascript html5 sensor orientation

2
推荐指数
1
解决办法
8039
查看次数

检测客户端设备是否支持 :hover 和 :focus 状态

听起来是一个简单的问题,但结果证明解决起来非常具有挑战性。对于某些网站,我的内容只有在用户悬停/聚焦链接时才会显示。然而,该链接本身有一个目标。

如果触摸屏用户单击这些链接之一,浏览器会立即转到该href位置。这意味着悬停内容永远不可见!

这就是为什么没有鼠标(或其他可以像魔术遥控器一样悬停的设备)的用户应该看到替代内容的原因。但是我怎样才能检测到这一点?

$(document).on('click','#my-menu-inner > ul > li > a',function(e) {

if(clientHasInputDeviceSupportingHover()) { 
  return true;
} else {
  e.preventDefault();
  $('#for-no-hover-visitors').html('');
  $(this).clone().appendTo('#for-no-hover-visitors');
  $(this).next().clone().appendTo('#for-no-hover-visitors');
}

});

function clientHasInputDeviceSupportingHover() {
    // HOW CAN I DETECT THIS???
    if($('#checkhover:checked').length > 0) {
      return true;
    }
    return false;
}
Run Code Online (Sandbox Code Playgroud)
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#my-menu-inner > ul {
  margin:10px;
  width:100%;
  background-color:yellow;
  list-style-type:none;
  position:relative;
}

#my-menu-inner > ul > li {
  float:left;
  margin:20px;
}

#my-menu-inner > ul > li > a …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery hover

2
推荐指数
1
解决办法
2642
查看次数

标签 统计

javascript ×4

css ×2

dom ×1

hover ×1

html ×1

html5 ×1

jquery ×1

orientation ×1

sensor ×1