Sencha Touch how to load custom CSS , JS if user is using PC or Tablet or SmarthPhone?

Question

How to setup page so when user is using Pc(Safari/Chrome/Firefox), user gets "normal" web page, but when he is using "ipad" to view the same URL, he gets Sencha Touch(css,js) files to his browser? JavaScript Browser Detection,navigator? Or Sencha has native solution for this? I know about Ext.env.Browser but user can have Safari on PC and IPAD? Any ideas? Thanks!

Answer 1

may be you have to use media query for this

check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://css-tricks.com/6206-resolution-specific-stylesheets/

Answer 2

I think the best and the cleanest solution is to add this functionality on the server side. Check the user-agent request header to decide which files to send. You can also redirect to different sub domain, eg to m.example.com. But if you want to do it with sencha then read this article: http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch

Answer 3

Example:

<script type="text/javascript">

    var isiPad  = navigator.userAgent.match(/iPad/i) != null;   
    var isiPhone    = navigator.userAgent.match(/iPhone/i) != null; 

        if(isiPad){
            alert("Ipad");
            //window.location = "http://www.google.com/iPad/"
        }if(isiPhone){
            alert("Iphone");
            //window.location = "http://www.google.com/iPhone/"
        }else{
            window.location = "http://www.google.com"
        }

</script>