browser-feature-detection

问题 I created a form on a website that allows users to upload files. Users can also drag and drop files onto this form. However, on some devices, it is simply not possible to drag and drop files (e.g. on my iPhone). So I only want to display the text "Drag and drop files here" only on devices on which it makes sense. Is there a way to detect whether the device supports drag and drop files in principle? A workaround could be to detect if a mouse pointer is moving. In this case, I would guess it is

问题 What's concept of detecting support of any css pseudo-class in browser through JavaScript? Exactly, I want to check if user's browser supports :checked pseudo-class or not, because I've made some CSS-popups with checkboxes and needs to do fallbacks for old browsers. ANSWER: I'm found already implemented method of testing css selectors in a Modernizr "Additional Tests". 回答1: You can simply check if your style with pseudo-class was applied. Something like this: http://jsfiddle.net/qPmT2/1/ 回答2:

问题 In earlier versions, I used to test if I should be triggering popstate manually on page load, because Chrome triggers it right after load, and Firefox and IE do not. if ($.browser.mozilla || $.browser.msie) { $(window).trigger('popstate'); } Now that they dropped the browser object in 1.9, how should I test for these browsers? Or how do I figure if I need to popstate on page load or not? The code is: $(function(){ $(window).on('popstate', popState); // manual trigger loads template by URL in

问题 In earlier versions, I used to test if I should be triggering popstate manually on page load, because Chrome triggers it right after load, and Firefox and IE do not. if ($.browser.mozilla || $.browser.msie) { $(window).trigger('popstate'); } Now that they dropped the browser object in 1.9, how should I test for these browsers? Or how do I figure if I need to popstate on page load or not? The code is: $(function(){ $(window).on('popstate', popState); // manual trigger loads template by URL in

问题 How can I detect browser support for HTML Media Capture* ? The traditional way of testing if an attribute is supported doesn't seem to work on some devices (tested on iPad and Google Nexus): var elm = document.createElement(input); if (capture in elm) { return true; } There's a test for Modernizr but it doesn't seem to be reliable (it uses the same principle): https://github.com/Modernizr/Modernizr/pull/909 __ (*) More info on HTML Media Capture: http://www.w3.org/TR/html-media-capture/ http:

问题 Using responsive Layout and a lot of CSS to create a Webpage, I am having a problem with scrollbars being hidden or shown and changing the layout by 17px. The main problem is that on OSX the scrollbars hover over the entire Layout without affecting it, but in any browser on Windows for example the scrollbar is part of the layout and therefore moving it to the left by its width of 17px. Trying to solve this I started to detect browsers like: if($.browser.chrome) { // adapt layout by 17px }

问题 I know how to check in Javascript if HTML5 audio playback is available. But how do I specifically check if MP3 audio playback is available, as IE9 and Chrome support it, while Firefox and Opera do not. 回答1: You could either check the User-Agent and see what browser is being used or you could test support with Javascript. var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); I got the above code from this page. return !!(a

问题 Is there a way to test whether a device supports Flash, similar to the way http://www.modernizr.com can feature-detect browsers and add a class to the body? 回答1: The template files created by Flash or Flashbuilder etc. have javascript checks in place to verify the user has the correct flash player version installed, if not they are given the option to download the player. You can replace this download link with anything you want so it'll fall back on whatever you choose if there is no flash

问题 Is there a way to detect 3G and 2G connections on mobile phones and handheld devices? Like If I want to deliver High-end Website when user is on 3G and Highly optimized version if user is on 2G. 回答1: In Android 2.2+ there's a JS object for that. You can write out a class for CSS use based on connection type. But it's not available on iOS for mobile web sites as far as I know. var connection, connectionSpeed, htmlNode, htmlClass; connection = navigator.connection || {"type":"0"}; // fallback

问题 There are lots of ways for browser detecting in JavaScript. As far as i know, using navigator.userAgent or detecting features (like XMLHttpRequest ) and so on. Can anybody tell me which way is the best and most effective? 回答1: If you really need to know what browser they're using, you mostly have to look at the userAgent string (although you can sometimes infer the browser by looking for a couple of obscure features). Just be aware that some browsers let the user change that and lie to you. :