2

I already have a working fixed footer in my webpage in iOS, but I want to repair it so it will not zoom with the rest of the content. Currently, it appears fine at normal zoom level, but when the user zooms in, the footer gets too big and runs off the page (see screenshot images linked below). I have achieved the desired behavior in the header such that it does not zoom with the rest of the page. I am currently using div tags, not the actual footer tag but I have tried it both ways and the problem persists. I am including relevant CSS code below the image links. I have tried using width:100%; instead of max-width:380px; with no luck. To view the full HTML/CSS source, please use your browser's "view source" function at http://www.michigandayspas.com/index.php. The footer divs are very close to the bottom and the div classes are "footer-cont" and "footer".

I have wrapped the header and footer content in similar divs so I am confused as to why they are not behaving similarly. One difference is that the header has an IMG tag, but the footer div contains more complicated HTML elements such as a table, but I don't see how this can cause an issue. I got and modified the code from a helpful video tutorial at: http://www.cssreset.com/creating-fixed-headers-with-css/

NOTE: I have two stylesheets; one for the desktop or tablet and another designed for mobile phones, especially iPhones. In order to demo this live, please visit the link above on your smartphone or in a simulator such as the iOS Simulator as a part of Xcode. I am using Safari on iOS.

These are URLs for screenshot images that demonstrate the problem: michigandayspas.com/images/iOS_index.png michigandayspas.com/images/ads_too_large.png

Relevant CSS from small-device.css file

.header-cont {
    width:100%;
    position:fixed;
    top:0px;
    background-color: white;
}
.header {
    margin-right: auto;
    margin-left:  auto;
    display:block;
    width: auto;
}

div.footer-cont {
    max-width:380px;
    position:fixed;
    bottom:0px;
    margin-right: auto;
    margin-left:  auto;
    opacity: 100%;
}
div.footer {
    margin-right: auto;
    margin-left:  auto;
    display:block;
    width:auto;
    background-color: white;
    opacity: 100%;
}
John Conde
  • 217,595
  • 99
  • 455
  • 496
user3923582
  • 21
  • 2

1 Answers1

1

You can stop the zoom on mobile adding this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
  • Thank you for your response. I tested adding this to my page, but this does not give me quite what I'm looking for. Using this results in the page zooming in way too far by default. I want the user to be able to zoom in on the page, but not the footer along with it. Is there a way to modify this meta tag to achieve this? – user3923582 Aug 11 '14 at 21:56
  • Usually not through the meta, or css. Try this answer: http://stackoverflow.com/questions/15233076/prevent-that-a-fixed-element-resizes-when-zooming-on-touchscreen – Alessandro Incarnati Aug 12 '14 at 07:13