0

I want to change the height of a div if the phone as an Iphone 5. I dont know javascript that well so this is a little hard for me. Here is my JS function in my index.html:

       <script>
        function resizeDiv("divId")
        {
            if (window.screen.height==568) { // iPhone 4"
                document.querySelector("meta[name=viewport]").content="width=320.1";
            var obj = document.getElementById(id);
            if (obj)
            {
                obj.setAttribute("style", "height:200px;");
            }
        }


        }
        </script>

I also have these meta tags in my head:

    <meta name="viewport" content="initial-scale=1.0">
    <meta name="viewport" content="width=320.1">

Please help =)

user2052886
  • 73
  • 7
  • First off try using the quotes in your getElement function. "document.getElementById('id')". If that doesn't work I'll see what I can do. Also did you see this post? http://stackoverflow.com/questions/13240404/how-to-check-if-is-iphone-5 – Stephen Feb 15 '13 at 01:55
  • Ok i tried that but it didnt work – user2052886 Feb 15 '13 at 02:06
  • Hmm... Maybe this will help. http://stackoverflow.com/questions/12604944/how-to-detect-if-the-device-is-an-iphone-5 look at the bottom with 7 up votes. – Stephen Feb 15 '13 at 14:30

1 Answers1

0

Using jQuery:

function resizeDiv(divId) {
    if ( $(window).width() == 480 || $(window).height() == 480 ) {
        $("#" + divId).height(200); // iphone 4                      
    }
    else {
        $("#" + divId).height(200); // iphone 5               
    }
}
Henry
  • 2,870
  • 1
  • 25
  • 17