move div on windows resize with jquery - iphone

Question

I am trying to move a menu div on a iPhone device. When I resize the browser window on my desktop, this works. But viewing it on a actual iPhone this doesn't work. But after rotating it on landscape mode it shows up the menu properly and rotating it back on portrait mode it retains the proper view, but refreshing the page it once more shows the wrong view.
I am using viewport <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> and the script is the following:
<script type="text/javascript">
$(window).resize(function () {
var responsive_viewport = $(window).width();
if (responsive_viewport <= 480) {
$("#menu").after($("#header"));
} else {
$("#header").after($("#menu"));
}
});
</script>
There is a simple sample and the actual page is testpage
Thanks
Sohail

Answer 1

The problem is you are doing all the action in .resize(), and it only fires when the window resizes.
You need to do the same action on document ready, you need to check what is the initial screen size when page loads.
Something like this.
function ChangeDiv(width){
if (width <= 480) {
$("#menu").after($("#header"));
} else {
$("#header").after($("#menu"));
}
}
$(function () {
var onLoadWidth = $(window).width();
ChangeDiv(onLoadWidth);
$(window).resize(function () {
var resizeWidth = $(window).width();
ChangeDiv(resizeWidth);
});
})