How to detect iphone mobile using prototype.js

Question

I want separate css file for iphone and another css for other mobile device. And Use the iphone.css if iphone is detected or responsive.css if other mobile device is detected using prototype.js. How can I do that. Please help.

Answer 1

You do not need prototype particularly, JavaScript itself can do the trick:

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

In your particular case you can:

navigator.userAgent.match(/iPhone|iPad|iPod/i)