标签: browser-feature-detection

我想知道是否可以检测浏览器是否在iOS上运行,类似于使用Modernizr进行特征检测的方式(尽管这显然是设备检测而不是功能检测).

通常我更喜欢功能检测,但我需要找出一个设备是否是iOS,因为他们根据这个问题处理视频的方式YouTube API无法使用iPad/iPhone /非Flash设备

我知道如果HTML5音频播放可用,如何签入Javascript.但是我如何专门检查MP3音频播放是否可用,因为IE9和Chrome支持它,而Firefox和Opera则不支持.

是否有可能在JavaScript中知道客户端浏览器是否支持CSS属性？我在谈论CSS3的旋转属性.我想只在浏览器支持它们时才执行某些功能.

在早期版本中,我曾经测试过我是否应该popstate在页面加载时手动触发,因为Chrome会在加载后立即触发,而Firefox和IE则不会.

if ($.browser.mozilla || $.browser.msie) {
    $(window).trigger('popstate');
}

现在他们在1.9中删除了浏览器对象,我应该如何测试这些浏览器？或者我如何计算是否需要popstate页面加载？

代码是:

$(function(){
    $(window).on('popstate', popState);

    // manual trigger loads template by URL in FF/IE.
    if ($.browser.mozilla || $.browser.msie) {
       $(window).trigger('popstate');
    }
});

更新

去了这个:

    function popState(e){
        var initial = e.originalEvent === undefined || e.originalEvent.state === null;
        if(!initial){
            activateRoute({
                key: e.originalEvent.state.key,
                settings: e.originalEvent.state.settings
            },'replace');
        }
    }

    function init(){
        $(window).on('popstate', popState);

        $(function(){
            var route = getRoute(document.location.pathname);
            activateRoute(route, 'replace');
        });
    }

最新版本的Firefox支持CSS变量,但Chrome,IE和其他浏览器的数量都没有.应该可以访问DOM节点或编写一个返回浏览器是否支持此功能的方法,但是我无法找到当前能够执行此操作的任何内容.我需要的是一个解决方案,如果浏览器不支持该功能,我可以将其用作运行代码的条件,例如:

if (!browserCanUseCssVariables()) {
  // Do stuff...
}

有人已经问过我关于在浏览器中检测SVG支持的问题,但有三个主要的解决方案,而不是很多关于每个优点的讨论.

那么:哪个,哪个最好？在便携性和正确性方面,即.假阴性(即"没有svg")是不受欢迎的,但是可接受的; 误报不是.

图表A:

var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';

var img = document.createElement('img')

img.setAttribute('src',testImg);

return img.complete; 

图表B:

return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");

图表C:

return !! document.createElementNS &&
       !! document.createElementNS (
             'http://www.w3.org/2000/svg',
             "svg")
      .createSVGRect;

我最近在求职面试中被问到这个问题,特别是围绕Javascript.我想知道正确的回应.

究竟是什么区别feature detection,feature inference以及使用 User agent字符串？

在某些浏览器中,包括Chrome稳定版,您可以这样做:

h3 {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

你不知道吗,h1将完全以灰度渲染.旧的一切都是新的.

无论如何 - 有没有人知道任何特征检测方法？

如果fil filter不起作用,我需要能够应用其他样式.

我想知道是否可以检测iOS用户是否正在使用webapp,或者只是使用safari浏览器访问正常方式.

我想要实现的原因是,当用户点击链接时,在iOS webapp上,他将被重定向到Safari浏览器.所以我使用以下解决方法让他留在webapp(阻止切换到safari浏览器).

$( document ).on("click",".nav ul li a",
        function( event ){

        // Stop the default behavior of the browser, which
        // is to change the URL of the page.
        event.preventDefault();

        // Manually change the location of the page to stay in
        // "Standalone" mode and change the URL at the same time.
        location.href = $( event.target ).attr( "href" );

        }
    );

但我希望这种解决方法只在用户使用webapp时发生,我希望它对webapp用户有条件.所以不在默认的safari浏览器上.

有没有人找到一种简单的方法来检测浏览器是否支持transitionilland事件,尤其是在所有主流浏览器中实际运行的方式？:(

我在这里找到了这个没有答案的帖子:测试Firefox中的transitionend事件支持,以及相当多的工作黑客.

现在我正在批量添加eventlisteners到所有供应商前缀,它有点成功(尽管我认为这是一个可怕的方法,每次看到它时都会伤害我的眼睛).但IE8和IE9根本不支持它,所以我需要检测这两个,并单独处理它们.

我更喜欢在没有浏览器嗅探的情况下执行此操作,并且绝对没有像jQuery这样的大型库/框架

我制作了一个jsfiddler片段来说明我的问题.有一个按钮可以生成一个对话框.通过单击关闭删除对话框时,它将在顶部和不透明度中转换,在结束转换后,它应该显示为= none.但是如果转换端永远不会被触发(例如在IE8和IE9中),则永远不会删除对话框,使其覆盖显示对话框按钮,从而破坏UX.如果我能检测到transitionend何时不起作用,我可以在关闭这些浏览器时设置display = none.

http://jsfiddle.net/QJwzF/22/

window.listenersSet = false;
window.dialogShouldBeVisible = false;

window.showMyDialog = function () {
    var myDialog = document.getElementById('dialog'),
        myClose = document.getElementById('close');
    if (!listenersSet) {
        if (!window.addEventListener) { // IE8 has no addEventListener
            myclose.attachEvent('onclick', function () {
                hideMyDialog();
            });
        } else {
            myClose.addEventListener('click', function () {
                hideMyDialog()
            });

            ['webkitTransitionEnd','oTransitionEnd', 'otransitionend', 'transitionend'].forEach(function (eventName) {
                myDialog.addEventListener(eventName, function (e) {
                    if (e.target === myDialog && e.propertyName === 'top') { // only do trigger if it is …