Detect isPhone

How do I tweak css for Phone. Or is there a way to detect wether ionic is running on a small screen like a iPhone 5 or SamsungGalaxy sIII

I personally use this small library: https://github.com/matthewhudson/device.js
It tells you which device you’re on (tablet/phone/desktop), OS (ios, android, windows), and wether if it’s in landscape or portrait.

If you look into their code I’m not 100% happy with it but it works. They check the user agent, screen dimentions, etc.

If it is only CSS tweaks based on size, why not just use media queries?

@media (max-width: 320px) {
    ...
}

Take a look at $ionicPlatform, it ofers isIOS(), isAndroid() and isWindowsPhone() functions.

http://ionicframework.com/docs/api/utility/ionic.Platform/

Also, you could bind to certain css classes that are added to the platform, reference to the forums for those exact names, it doesn’t seem to be documented yet. For example: Target different platform

1 Like