Several tips for a better mobile styling

mobile-elements.md

Tips for mobile-elements

iOs7 forces now, particulary on input[type=submit], rounded corners and glare on inputs. It's possible disable this on several ways. Original post: http://stackoverflow.com/questions/7599533/ios-forces-rounded-corners-and-glare-on-inputs

Home screen icons for iOs

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

For Reset the default sytle of input buttons ( in iOs7 You can use CSS to clear the default styles

input {
    -webkit-appearance: none;
    //Be careful with border-radius if your button has one
    -webkit-border-radius:0;
    border-radius:0;
}

Or you can use <button>Submit</button> instead <input type="button" />

Remove the 'flash' when you tap in a link

If you want remove the 'flash' when you tap in a link, you may do

.myElement {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* For IE you must to add a meta tag to your document */

<meta name="msapplication-tap-highlight" content="no"/>