iOS web app snippets

disable-double-tap-resize.html

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

link-fixes.html

<style>
    body {
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove black mask on tabbing links */
        -webkit-overflow-scrolling: touch;
    }
</style>

<script>
    document.addEventListener("touchstart", function(){}, true); /* Enable :focus on links */
</script>

one-pixel-on-retina.html

<style>
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-device-pixel-ratio:1.5) {
    button {
        font-size: 26px; /* 2x */
        line-height: 74px; /* 2x +2px */
        border-radius: 6px; /* 2x */
        padding: 0 30px; /* 2x */
        border: solid 1px; /* Border 1px */
        -webkit-transform: scale(0.5); /* Here's the magic */
        
        color: #fff;
        border-color: #2978B0 #266FA5 #1C557D;
        background: linear-gradient(to bottom, #50A9E7, #307CB3);
        box-shadow: inset 0 2px 0 rgba(255,255,255,.2),
                    0 2px 2px rgba(0,0,0,.08);
        text-shadow: 0 -2px 0 rgba(0,0,0,.25);
    }
}
</style>