How Should I load my mobile content first if viewed on mobile?

Question

I have a page which renders well in desktop,whose markup is totally different from mobile's markup,as design is different on both.

I add extra <div> in my existing desktop markup.

I use media-queries for toggling from desktop to mobile,by hiding mobile content if viewed in desktop(width > 1024) and vice-versa.

I also use two different meta tags for mobile and ipad.

For mobile: for removing pinch effect(zoom in/out)

For ipad: for allowing pinch effect(zoom in/out)

I add this meta tags through javascript which adds meta for mobile if it is mobile and meta for ipad if tablet

Now on when page viewed on mobile,desktop version loads for few seconds and after that mobile version is visible.

Is it possible that i should be able to view my mobile version first, or when viewed on mobile just hide the desktop version??

Here is My javascript code to toggle meta:

var browserdetect = function() {

    var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile|ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));

    var istablet = (/ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));

    var metaiphone = '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">';

    var metaipad = '<meta name="viewport" content="width=1300">';

    if(ismobile) {
        if(!istablet) {
            if($('body').hasClass('responsive-page')){
                $('head').append(metaiphone);
            }               
        } else {
            $('head').append(metaipad);
            // console.log("tab");    
        }
    }
}

Answer 1

You have gone all wrong about this. You should serve your mobile clients only the mobile html&css if it's totally different than the desktop version. You should detect the client on the server and decide there which html&css to send them (or redirect mobile clients to a different domain that has a mobile version).

The point of media queries is to modify the existing html you have to work on different devices. You should look at this article for a quick overview: http://learn.shayhowe.com/advanced-html-css/responsive-web-design