标签: browser-feature-detection

是否有可能检测到对DOMContentLoaded事件的支持？

方法就像Kangax的解决方案在这里不起作用,因为DOMContentLoaded它不作为任何元素的属性公开:在没有浏览器嗅探的情况下检测事件支持

在等待响应式设计进入遗留网站的过程中,如果屏幕小于480px,我想将浏览器重定向到移动版本

狩猎我想出来了

var isSmall = window.matchMedia ? 
              window.matchMedia("screen and (max-width: 480px)") : 
              screen.width<=480;

题

这在2014年是否可以接受,或者是否有更好/更安全/更新的方法来做我想要的而不使用useragent嗅探？

参考

• MDN Window.matchMedia

• 使用window.matchMedia()在JavaScript中使用JavaScriptKit CSS媒体查询进行匹配

• QuirksMode screen.width没用(因此添加了matchMedia)

如何检测HTML Media Capture*的浏览器支持？

传统的测试属性是否受支持的方法似乎不适用于某些设备(在iPad和Google Nexus上测试):

  var elm = document.createElement(input);
  if (capture in elm) {
    return true;
  } 

有一个对Modernizr的测试,但它似乎不可靠(它使用相同的原理):https: //github.com/Modernizr/Modernizr/pull/909

__

(*)有关HTML媒体捕获的更多信息:

http://www.w3.org/TR/html-media-capture/
http://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-round1

除IE之外的现代浏览器MJPEG(Motion JPEG).这是一个小例子.

我可以检测到支持MJPEG吗？我看着Modernizr是徒劳的.

我正在为移动和桌面浏览器开发应用程序.我想知道是否有检测浏览器是否支持文件上传.我正在寻找特征检测,而不是浏览器检测.有没有办法找出来？

服务器端或客户端都没问题.

谢谢

经过一番研究后,我发现Chrome和Opera如果有绝对路径就会在foreignObject中渲染图像,Firefox只有在数据为uri格式时才渲染图像,因为它不会加载任何外部资源.

我已经尝试了几种方法,但我找不到一种方法来检测这种行为,例如我试图检查foreignObject中图像的尺寸,但它们总是正确的,Firefox只是绘制一个透明的矩形图片尺寸.

你知道怎么做吗？

代码 这种情况很难重现,但你可以用这种方式测试它:

• 转到谷歌主页
• 在Chrome上打开firebug控制台或javascript控制台
• 执行此代码:

:

var img = new Image();

img.src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MzgnIGhlaWdodD0nMTkwJz48Zm9yZWlnbk9iamVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz48aW1nIHNyYz0iaHR0cHM6Ly93d3cuZ29vZ2xlLml0L2ltYWdlcy9zcnByL2xvZ28xMXcucG5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9Im1hcmdpbjogMHB4OyIvPjwvZm9yZWlnbk9iamVjdD48L3N2Zz4=";

document.body.appendChild(img);

在Chrome上,徽标图像可见,而在Firefox上则不然.svg代码是base64编码的,这是原始代码:

<svg xmlns="http://www.w3.org/2000/svg" width="538" height="190">
<foreignObject width="100%" height="100%">
<img src="https://www.google.it/images/srpr/logo11w.png" xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px;">
</foreignObject>
</svg>

在OSX上的Safari 6.1和7中启用省电模式时,我遇到了无法加载YouTube播放器的问题.如果YouTube用户正在使用实验性HTML5播放器,则问题不会发生,但它仍处于测试阶段且大多数人仍在使用Flash播放器.默认情况下,大多数新版本的Safari都会启用"禁用插件以节省电量"选项,这会导致YouTube iFrame API在尝试初始化播放器时进入无限循环.

这些window或navigator对象上是否有任何属性可能表示启用了省电模式,以便我可以警告用户？

过去,检查鼠标是否存在的最佳方法是寻找触摸事件支持.但是,桌面Chrome现在支持触摸事件,使此测试失败.

有没有办法直接测试鼠标悬停事件支持,而不是根据触摸事件的存在推断它？

解决方案:根据AshleysBrain的回答,这是有效的代码.

jQuery(function()
{
    // Has mouse
    jQuery("body").one("mousemove", function(e)
    {
        attachMouseEvents();
    });

    // Has touchscreen
    jQuery("body").one("touchstart", function(e)
    {
        // Unbind the mouse detector, as this will fire on some touch devices. Touchstart should always fire first.
        jQuery("body").unbind("mousemove");

        attachTouchEvents();
    });
});

我将从问题开始.当一个特定的浏览器有一个错误的功能实现,你的javascript需要知道当前浏览器是否有错误的实现,所以它可以使用一个替代策略,如何在没有浏览器类型嗅探的情况下判断实现是否有错误(通常被认为是坏的)？

这是整个情况.

我正在研究一些想要使用"输入"事件来获取用户对<input type="text">字段的更改通知的代码(比"更改"事件更有效),但是当不支持该事件时,它会使用很多更复杂的方案涉及一堆其他事件.

由于"输入"事件仅在某些浏览器中受支持,因此我开始寻找一种方法来对事件进行特征检测(而不是浏览器用户代理嗅探),因为特征检测通常是一种更强大的操作方式.因此,我发现这篇伟大的文章正是为了做到这一点,这个代码似乎工作:

var isEventSupported = (function(){
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

然后,我遇到了IE的问题(惊喜,惊喜).虽然IE声称支持"输入"事件并且它通过上面的功能测试并且它大部分时间都可以工作,但是IE的支持是如此糟糕.当用户点击退格键(以及其他缺少的行为)时,它甚至不会触发事件.因此,我不能在IE中依赖它.所以,我已经构建了这个很好的干净代码,它为"输入"事件做了一个功能测试,并且当它存在时使用它非常干净的实现,当不存在时使用这个更加丑陋的解决方案涉及监视其他八个事件.现在,它已经在IE中被破坏了,因为"输入"事件的功能测试通过,所以代码试图使用它,但它有点像地狱,所以它不起作用.

由于这些IE错误出现在用户操作上,我想不出任何方法来设计一个javascript功能测试来识别错误的行为.因此,我唯一的当前途径是使用浏览器嗅探,如果浏览器是IE,则拒绝依赖"输入"标记.

除了浏览器嗅探之外,这里是否有任何选项可用于识别"输入"事件中的错误行为？如果必须进行浏览器嗅探,是否有办法通过行为来识别IE而不是可以自由欺骗并且不保证准确的用户代理字符串？

使用响应式布局和大量CSS来创建网页,我遇到了隐藏或显示滚动条并将布局更改为17px的问题.

主要问题是在OSX上滚动条悬停在整个布局上而不影响它,但在Windows上的任何浏览器中,例如滚动条是布局的一部分,因此将其移动到左侧宽度为17px.

为了解决这个问题,我开始检测以下浏览器:

if($.browser.chrome) {
   // adapt layout by 17px
} else if ($.browser.mozilla) {
   // adapt layout by 17px
}  else if ($.browser.safari) {
   // dont adapt layout by 17px
}

但在阅读了很多关于该主题的帖子后,我意识到不是检测浏览器,而是许多人建议使用功能检测.那么有没有办法找出浏览器如何处理滚动条？他们是否会成为页面布局的一部分,或者他们只会徘徊在Safari之类的所有内容之上？

谢谢你的帮助!