modernizr | 易学教程

What is the most reliable way to detect a mobile device using Modernizr?

阅读更多关于 What is the most reliable way to detect a mobile device using Modernizr?

问题 I am developing a responsive site and I have been asked to swap any freephone numbers on our site to the landline equivalent when a user is browsing on a mobile device. What is the most reliable way to detect if a user is on a mobile device using the Modernizr library (or any other library)? I am aware of Modernizr.touch and also Modernizr.geolocation. When the two are combined in an if(Modernizr.touch && Modernizr.geolocation) statement they are a good indicator of whether you are on a

Should I use the new HTML5 semantic elements? [closed]

阅读更多关于 Should I use the new HTML5 semantic elements? [closed]

问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 6 years ago . I'm in the process of upgrading my website, and this involves the decision of using the new HTML5 semantic elements <nav> <header> <footer> <aside> <section> over regular old <div> elements. I do plan on supporting IE7 and IE8, but I know that these versions don't support the

Modernizr not applying classes to html-tag

阅读更多关于 Modernizr not applying classes to html-tag

问题 I'm building a website at the moment, where I need the use of Modernizr, but for some reason it doesn't apply the classes to the html-tag as it should.. My code looks like this: <!doctype html>    <html class="no-js" lang="en"> <head> <script src="http:/

window.resize fail when using Modernizr and Zepto

阅读更多关于 window.resize fail when using Modernizr and Zepto

问题 I'm having a problem with resizing an element using JavaScript and the Zepto library. When the page loads the element gets the window width and height just fine. I have also tested my window.resize with an alert() and that works fine too. My problems occurs when I try and resize the element as the window changes size. Here is my JavaScript which is loaded through Modernizr: $(document).ready(function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0); var navConfig = { winWidth : $

Allow access only from mobile and tablet devices

阅读更多关于 Allow access only from mobile and tablet devices

问题 My client has very specific request. He wants to block all "classic" computers (desktop/notebook). So if I access the website from iPhone, Android or tablet it displays everything (the different resolutions I can hadle via responsive design). But when somebody from Mac or Windows or Linux (I know that Android is also based on gnu/linux ;) ) access the web, he gets only a message that "this web is only for mobile devices"or something like taht. But I am not sure how to "ban" mac os, win, linux

How can I use Modernizr to get border-radius working in IE8?

阅读更多关于 How can I use Modernizr to get border-radius working in IE8?

问题 I know there has been numerous articles about obtaining rounded corners in IE8. My question is, how to use Modernizr to support CSS3/HTML5 features? For example to show rounded corners in IE8, I am using CSS-3 property -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; I have included Modernizr in my page, but still not able to see rounded corners in IE8. 回答1: Modernizr does not enable features, it just tests if they are available. For CSS, it can also remove the need

Modernizr testing

阅读更多关于 Modernizr testing

问题 How come this alerts both, yes and false? Modernizr.load([ { test: Modernizr.cssgradients, yep: alert('Supports it!'), nope: alert('Oh, damn! This browser sucks!') } ]); I'm using the latest chrome on OS X. 回答1: Because you're calling alert() directly there, and the result from alert() (always undefined ) is assigned to the yep and nope properties. You need to wrap alert() in a function and assign that function instead: Modernizr.load([ { test: Modernizr.cssgradients, yep: function () { alert

Why does accessing the localStorage object in Internet Explorer throw an error?

阅读更多关于 Why does accessing the localStorage object in Internet Explorer throw an error?

问题 I'm working on a client issue where Modernizr unexpectedly does not detect the support for the localStorage object in Internet Explorer 9. My page correctly uses the HTML 5 doctype ( <!DOCTYPE html> ) and the developer tools report the page has a Browser Mode of IE9 and a Document Mode of IE9 standards so I would expect this to work. I've debugged into the following try / catch block in Modernizr and discovered a JavaScript error is thrown as soon as the localStorage object is accessed. tests

How to add CSS3 rounded corners with modernizr?

阅读更多关于 How to add CSS3 rounded corners with modernizr?

I am trying to add CSS3 based rounded corner support in IE7 and IE8 on following page Test URL: http://jaspreetkaur.com/postjoint I have included modernizr library, but it's not working. Is there any code that i need add to make it working in IE? As others have said, Modernizr won't make legacy browsers able to support CSS3. It only checks for support, plus other neat features, such as HTML5shiv, so that you can use HTML5 markup. To enable CSS3 features in older browsers, you might try CSS3 Pie, but I find it some times creates more problems than it solves. I usually just don't let older

Modernizr.touch returns true on firefox browser

阅读更多关于 Modernizr.touch returns true on firefox browser

问题 I have written a peace of code to get the event based on touch and non-touch. Its working all other browsers and devices, but Firefox. Default FF return the true . var thumbsEvent, isTouch = Modernizr.touch; // detect the touch if(isTouch){ thumbsEvent = 'click';//on touch surface, click } else { thumbsEvent = 'mouseover';//on non touch surface, mouseover } Is there a way to manage this issue. Example fiddle 回答1: On behalf of Modernizr - We're really sorry about this. Modernizr.touch has been