Discover device using modernizr

Question

I designed a page that detects a device using device width and is based on the fact that it loads reputable js and css files. how can I evaluate 3 conditions in modernizr and which is the best way to detect a device (desktop, mobile or tablet).

<script type="text/javascript"> Modernizr.load([ { test: Modernizr.mq('(min-device-width: 320px) and (max-device-width: 728px)'), yep : ['mob.css', 'jquery.mobile-1.1.0.css', 'jquery.mobile-1.1.0.js'], nope : 'pc.css' } ]); if (!Modernizr.borderradius) { $.getScript("jquery.corner.js", function () { $("input").corner(); }); } if(!Modernizr.required) { $("#frmSearch").submit(function(){ if($.trim($("#txtSearch").val().length) == 0){ alert('Please, Enter some keyword'); return false; } }); } </script> 

Answer 1

If you are going to do this in Modernizr, I would say do not try to write a trilateral condition; write three separate true / false conditions.

those. instead of having one condition that says “desktop”, “mobile” or “tablet”, you should have three conditions: “desktop”, “mobile” or “tablet”, each of which will be true or false .

Hope this answers your question.

However, another point I would raise is how you draw a line between these types?

It is easy to say that the iPhone is a mobile phone, and the iPad is a tablet, but between them there are devices of any size; where is the cut-off point when the mobile phone becomes a tablet? What about a tablet that can connect to the base unit to become a laptop?

The problem you are about to face is that the form factors are very fluid; therefore, you may never be completely sure of some devices as to which category they belong to. You might be better off setting your dynamic site to screen resolution using custom CSS and CSS queries.

Hope this helps.