相关疑难解决方法(0)

我有一个需要在调整浏览器窗口大小时调整大小的画布,所以我有以下内容:

var resizeCanvas = function () {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = (canvas.offsetWidth || canvas.width) * ratio;
    canvas.height = (canvas.offsetHeight || canvas.height) * ratio;
    canvas.getContext('2d').scale(ratio, ratio);
}

window.addEventListener('resize', resizeCanvas);

这很有效,除了在移动设备上滚动触发resize事件.

这是不希望的,因为调整画布大小会清除其内容,这意味着当移动用户滚动时,画布总是被擦除.

由于这个答案,我提出了一个基于缓存宽度和双重检查的解决方案,但根据我的设计,我真的只需要解决受我的视口metatag影响的设备的问题:

<meta name="viewport" content="width=device-width, initial-scale=1">

有没有我可以检查浏览器是否正在使用该元标记？我正在寻找类似的东西:

if(viewportMetaTagIsUsed){
    //For mobile browsers
    window.addEventListener("orientationchange", resizeCanvas);
} else {
    //For desktop browsers
    window.addEventListener('resize', resizeCanvas);
}

我们可以检测浏览器是否支持删除文件<input type="file" />？

例如,这可以在Chrome中实现,但在IE8中则不行.

Modernizr.draganddrop是一种可能性,但它是正确的选择吗？我没有添加任何自定义拖放事件处理程序.

更新

要验证Joe的答案,这是一个应该停止文件丢弃的jQuery示例.已在Chrome和Firefox中验证.

$yourFileInput.on('drop', function() {
    return false; // if Joe's explanation was right, file will not be dropped
});

我正在寻找一种方法来检查设备是否支持DeviceOrientationEvent或DeviceMotionEvent.更确切地说,我不知道该设备是否真的有加速度计.

遗憾的是window.DeviceMotionEvent,并window.ondevicemotion分别window.DeviceOrientationEvent与window.ondeviceorientation存在,虽然设备-的MacBook视网膜-没有加速度计.

我很清楚,如果事件永远不会被触发,事件监视器的回调函数也将永远不会运行.但在我的情况下,我的程序需要知道设备是否有加速度计,因为如果没有加速度计,用户应该收到通知.

不幸的是,这篇文章的答案对我的问题不起作用.

• 检测对给定JavaScript事件的支持？

所以,我已经将一个可折叠的菜单变成了一个基于网站的系统,它将菜单最小化为屏幕右上角的6个"宝石按钮",每个按钮看起来都相同并且包含一个数字,这是指的警报数量.菜单中的项目.

这些内容与我的问题并不真正相关,但只是解释说它们不是文本的,因此不会有清晰易读的标签来解释菜单项的作用.

因此,我已经放了一个onMouseover工具提示,它显示一个隐藏的div,解释每个菜单项是什么.

还有一个onClick事件,jQuery将菜单滑入视图.

这是一个私人内联网系统,我不会在公共网站上使用这些菜单,因为它不够清楚,但鉴于这是应用程序,我的问题是:

例如,当在iPad上观看时(可能是其他触摸屏设备),onMouseover将作为onClick处理,因此,"点击"按钮只显示工具提示,而不是按要求显示菜单.

处理这个问题的建议是什么？

我看过这个帖子使用jQuery检测iPad用户？所以,鉴于它是一个私人网络应用程序,我可以检测iPad用户并重新构建jQuery以忽略iPad用户的onMouseover命令,但如果我要将类似的应用程序扩展到可能拥有更多用户的东西,那将是什么处理这两个事件的方法？