Sencha build production can't insert meta tag

Hi Im developing a sencha-touch-2 app which will be embedded on iPhone UIWebview. The UIWebview size is 280x420 which is centered on the iPhone screen. Everything works perfect on sencha development but when I try to build the sencha into production, the size of the sencha page streched or not fit to the size of the UIWebview. Please see code below

SENCHA

Adding meta tag to the body of index.html

<body>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

This code works on development but when change to production the page change. What should I do to make it on the production build, since production is very fast on loading.

Solution

Try this, just add this script in your html body tag.

<script type="text/javascript">
         setTimeout(function(){
             var meta = document.createElement('meta');
             meta.setAttribute("name","viewport");
             meta.setAttribute("content","width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;");
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(meta);
         },1000);
    </script>

Sencha touch 2.0 will overwrite your script with it's built in meta tag. So, what happen is your meta tag will be loaded but will be replaced by it's own meta tag.