borismus / device.js Goto Github PK

Noticed that you include the polyfill for matchMedia as well as modernizr in your repo. If you check mq in the build it includes the polyfill under Modernizr.mq with a few more edge cases fixed. Also you won't double up on the injection method and you'll save some bytes!

http://modernizr.com/download/#-touch-mq-teststyles-prefixes

Very nice lib, thanks!

I did encounter the problem that document.querySelectorAll does not exist in IE versions before IE8, thus it throws an error. Since basically I don't care about redirecting a browser that doesn't support this, I wrapped the entire code in if(document.querySelectorAll){ ... }

https://drafts.csswg.org/mediaqueries/#mf-deprecated
Deprecated media feature max-device-width

Nice solution.

But it is not ideal if we want to let the user stay on the desktop website after using the force=1 GET parameter. (Many users like to browse the desktop version of a website even if displayed on a mobile device.)

You may want to consider creating a "preference cookie" when that parameter is used.

In such a scenario, the desktop website can offer a link to the mobile version if our user wants to go back to that version.

Modernizr is released under dual BSD/MIT license. Since a substantial chunk of Modernizr code is included here, the copyright and permission should be included with the project. (Or maybe I've just been working in a library for too long.)

For some reason the tablet size is the one being loaded.
Desktop touch isn't enabled although seems like Chrome thinks it is.

Is there any Google Advice / Best practise (like here about multilanguage content: http://support.google.com/webmasters/bin/topic.py?hl=en&topic=2370587&parent=2371375&ctx=topic ), but devoted to 'multidevice' topic? I'm really interested how to say Google "Here is my content, but i also have optimized one for mobile, tablets and others X-width devices".

Putting content just like that on m.foo.com or tablet.foo.com won't be treated as a duplicate?

PS: I know it is not an issue, but You can always mention it in Your readme file. Somewhere near: "You may also want to distinguish between these different versions by providing separate URLs (eg. tablet.foo.com, m.foo.com and foo.com) for clarity and perhaps for SEO reasons."

Device.js lets you force loading the exact version of the app to load through the combination of ?device=deviceClassId and ?force=1 GET parameters. However, these could be hidden to give a cleaner URL.

Looks like perhaps some tests from a different project were accidentally checked into this project?

Hi!
I have started using your repository to switch between a desktop (orientation: landscape) and mobile (orientation: portrait) versions of a website. However, when using these orientation media queries, I was getting errors that I traced to the parsing of the media query in MQParser.prototype.parse in the file device.js. Apparently, using and as the criteria to split up the elements of a media query did not take into account that and is included in the word landscape. I developed a simple workaround to replace landscape with a dummy word, and I substituted landscape back again after the query was parsed. However, you may want to update the code to handle this situation in a more elegant manner. Thanks for developing this very useful capability!

URL should be preserved between versions. For example if you go to http://m.foo.com/bar/baz?key=val, on a tablet, you should be redirected to http://tablet.foo.com/bar/baz?key=val.

(thanks to @aarongustafson for reminding)