Fix iOS Full-Width Background Zoom

If you're using this tutorial to create full-width sections with fixed backgrounds, there's a bug in iOS that causes the images to zoom in. In order to fix this, you can use Modernizr to detect if the browser is on a touch-screen device, and apply a scroll style background instead.

Here's what the CSS of the original looks like:



<style type="text/css">
#section1 {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        background: url("PASTE_URL_HERE") no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
        }
</style>

First, add the Modernizr library:



<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript">
</script>

Then, adjust the CSS to remove the fixed property and add the CSS to add the fixed property to non-touch enabled devices so that the resulting CSS looks like this:



<style type="text/css">
#section1 {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        background: url("PASTE_URL_HERE") no-repeat center center; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
        }

.no-touch #section1 {
    background-attachment: fixed;
}
</style>