Fixing the mobile header height in jQuery Mobile for iOS7

June 3, 2014, 9:32 pm
Author: James Griffiths

If you're developing Phonegap applications with jQuery Mobile for devices running iOS7 then you're probably going to experience some issues with the placement of items within the application header. As Apple have changed how the header behaves in iOS7 you'll need to make some adjustments in your code to accommodate this.

If you're developing in jQuery you can use code akin to the following snippet:

if (parseFloat(window.device.version) >= 7.0) {
  $('h1').each(function() {
    $(this).parent().css("padding-top", "20px");
    $(this).siblings('a').css("margin-top", "20px");

What this code does is to loop through all the tags and assign a padding of 20 pixels to the top of the header on each page of the App (under the assumption that only the screen header will have a h1 tag). As we will more than likely have navigation buttons situated in the header we want to ensure these are also suitably positioned. Thanks to the use of the siblings selector we can target these with relative ease.

If you prefer using native JavaScript then you could try the following code snippet instead:

if (parseFloat(window.device.version) >= 7.0) {
  var h1 = document.getElementsByTagName('h1');
  for(var k = 0; k < h1.length; k++)
    var heading =   h1[k]; = "20px";
    if(heading.parentNode.getElementsByTagName('a').length >= 1)
      var buttons = heading.parentNode.getElementsByTagName('a')[0]; = "20px";


« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.