borismus / device.js Goto Github PK
View Code? Open in Web Editor NEWSemantic client-side device detection with Media Queries
Home Page: http://borismus.github.com/device.js/
License: Other
Semantic client-side device detection with Media Queries
Home Page: http://borismus.github.com/device.js/
License: Other
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.