matthewhudson/current-device

📱 The easiest way to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

current-device's Issues

Incorrect detection using iframe

Hi, when using device.js inside a narrow iframe, it gets detected as "portrait", even if the device (iPad) is in landscape.

Add node webkit detection

Add Travis CI support

window[_orientation_event] = _handleOrientation; is error

in https://github.com/matthewhudson/device.js/blob/master/lib/device.js

window[_orientation_event] = _handleOrientation;

is error, right is:

window['on' + _orientation_event] = _handleOrientation;

Assuming 0 degrees for portrait is a misconception

Some devices report 0 degrees in portrait (e.g. iPad), while others report 0 for landscape (e.g. Motorola Xoom). window.orientation only reports the degree of rotation from the default orientation. What that default is, is up to the manufacturer. Annoying but true :(

http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/

Add bower support

This looks like a nice tool we could need for our project. But it has no bower support :/

Any chance Bower support can be added soon? It's easy ...

Thanks!

Update http://matthewhudson.me/projects/device.js/

device.js is at 0.1.56 on the test page, could you please bump it up to 0.1.58?

Thanks!

Like to add orientation based javascript changes

Would really like to see support for orientation based javascript changes. So on orientation we can adapt the javascript content of an element (as opposed to the current media query change in the html tag)

User Agent strings

I need to compile a list of target devices to test against.

Add CommonJS/AMD support

Add component.json support

No desktop on conditional javascript

There is no method to detect desktop via javascript

wrong version and tag

bumped to v0.1.61 here,
ddc617e
but have v0.1.16 here
https://github.com/matthewhudson/device.js/releases
https://github.com/matthewhudson/device.js/tags

Add support for Mobile Safari Standalone Applications

Add a class('standalone' for example) when page is launched in standalone mode(full-screen) in mobile Safari. Simple implementation can be seen here: https://github.com/ttsvetko/device.js/commit/d0d90e89a04a7d9b530a64048d16a70e3d8f4a05

Note that i'm not limiting standalone to mobile safari only, cause expect future support from other browsers

Detects a Gateway desktop with touch as "mobile"

Not sure of the model number. Looks just like this one: http://www.shopping.com/gateway-gateway-one-23-touch-screen-all-in-one-computer-6gb-memory-500gb-hard-drive/info

Use GitHub's CoffeeScript style guide

Read more

Would love to see OS versions

For mobile devices, I'd love to see OS versions integrated, considering the major differences between Android browsers.

Add authors script

Adapt from https://github.com/facebook/react/blob/master/scripts/authors

Add device.js to cdnjs

Previous to doing this, I need to adjust the build process for new version releases.

• I need to start tagging versions
• I need to fix the grunt 'bump/release' task, because the package.json version update isn't updated in grunt.initConfig({ pkg: ... })

Add .retina() and .retina

var isRetina = window.devicePixelRatio > 1;

Fixed Windows Tablet/Desktop detection

Refactor into CoffeeScript class object

Clarify Phone vs. OS Methods & Classes

I should add two new methods:

• device.androidPhone()
• device.blackberryPhone()

This will provide conceptual symmetry with the device.windowsPhone() method and provide stronger methods for writing Conditional JavaScript.

Note: device.android() or device.blackberry() will remain intact. They provide a nice general condition check since they are both implemented similarly to device.ios()

Add docs

BB10 detection

Since the BlackBerry 10 browser uses the string "BB10" instead of "BlackBerry", device.js now detects it as being a 'desktop' browser, when it should be mobile.

Add cordova / phonegap detection

Add grunt.js

Useful for building the CoffeeScript into dev & prod versions.

Performance: Use indexOf() not match()

This would be a slight performance update - but certainly worth doing.

Also, there's no need for the match() case-insensivity flag, UA is already lowercase.

Performance comparison

Flesh out example code

Update LICENSE year

Add Express.js middleware

CSS Combinator is not applying along with device.js class.

Hi,
CSS Combinator is not applying along with device.js class.

In our development, we are dynamically adding html element and along with that we are also writing device specific css.

Combinator with those dynamically added html element is not working for us?
(Example Combinators, pseudo class)

Example : .mobile > div
here ".mobile" is class

Thanks,
Anish Jain

Tag releases so it's installable with semver.

If you look at bower info devicejs compares to bower info underscore you'll notice there's no available versions. You need to do git push origin v0.1.16 or similar (see: http://bob.yexley.net/creating-and-maintaining-your-own-bower-package/)

Currently we have to pin our packages to a commit hash.

Add phablet devices

Thank you for great script.
Can you add support for phablet devices (additional class .phablet), which is tablets, but in portrait orientation it has <640 px width? It is logically to show mobile page version on it, but I can't detect them as mobile.

Wrong class name on Windows 8

Chrome, Firefox, IE: all have classname "mobile" on Windows 8.1 desktop.

Orientation: undefined on firefox beta on android

Hello,

On Android 4.1.1 + firefox beta (16)

UA String: mozilla/5.0 (android; tablet; rv:16.0) gecko/16.0 firefox/16.0
Dimensions: 980x1345
Orientation: undefined
CSS Classes: android tablet portrait

Add 'windows' class for Windows Desktops

Hi! My results from demo page is wrong. That says that I on Mobile, Portrait Windows. Since I on Desktop, Landscape Windows. My screen is 1920x1080 px.

Add Contributing guidelines

If I want to contribute, I don't know what files I'm supposed to change. I can:

1. Change just the src coffee file.
2. Change the src coffee file and compile it using the grunt build command.

The problem with the second option is that the grunt task also changes the version number of the project. Changing the version should be up to the maintainer of the project, no?

Add Best Practices guidelines to README

Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).

However, that common misuse of device detection doesn't mean it should never be done. A library such as this one could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance.

In light of this, I think this library deserves a foreword talking about the dangers of misusing device detection and highlighting some use cases where it should be applied.

Create GH page

remove unnecessary space in function _addClass

was:

_addClass = function(class_name) {
        if (!_hasClass(class_name)) {
            return _doc_element.className += " " + class_name;
        }
    };

fix:

_addClass = function(class_name) {
        if (!_hasClass(class_name)) {
            return _doc_element.className = _doc_element.className.trim() + " " + class_name;
        }
    };

this function added space before last class in html tag every time when it was called

Transition from CoffeeScript to JavaScript

Why? Because reasons. What reasons? These ones:

• Enable more people to contribute
• Improve performance (only slightly)
• Ease Pull Request acceptance

Add Conditional CSS/JS support for Phones

Great work! Here are some methods I would like:

• isMobile: Checks if user is viewing from a mobile device (boolean)
• isTablet: Checks if user is viewing from a tablet (boolean)
• isPhone: Checks if user is viewing from a phone (boolean)

Add tests

Haven't decided which Unit Testing lib to use for this.

I have however, discovered this handy method for overriding the User Agent string.

Correct version?

The package.json shows that this library is at 0.1.59 but the version at the top of the minified file shows 0.1.58

Orientation wrongly detected (to landscape) when Debug Console is ON

Reproduced on iphone 3gs's Safari browser.

While in portrait orientation and if debug console is on the library detect it as landscape.

Add Symbian support

Symbian phone support would be nice addition for this

No-conflict mode for use with PhoneGap

It would be useful to have a no-conflict mode (similar to jQuerys) for use with PhoneGap/Cordova, which also sets window.device.

I realised this when I got errors after packaging an html/js app with PhoneGap Build - PhoneGap was overwriting window.device. As a workaround, I did a find+replace to use window.devicejs instead.

Maybe have a note in the readme about use with PhoneGap too, as I expect it'll be a popular combination.

Problem with touch-enabled Windows laptops

I've met some problems with device.js's way to detect Windows Tablets.

Detection is done correctly in some cases, but when user has a Windows laptop, with touchscreen and Win8 (or 8.1) device.js detects user as tablet user. And some cases that detection is wrong, as user should be detected as desktop user, instead of tablet user.

One (maybe the only) way to handle this, for now, is to detect these users by OS architecture. ARM is tablet and Win64, x86 and wow64 are desktops.

Sample UA-string for some Lenovo model:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0; Touch; MALNJS)

Add device.js to jamjs