Hello guys
Today it'll be short post (but hopefully I will add here new hacks later on) about CSS on iPhone and iPad. It should work as well on any mobile Web-kit based browser.
When it comes to styling webiste usually I'm checking it in my desktop browser. Everything seems to works fine but when I run website on my iPhone or iPad, strange things happens. Here are some short fixes for problems I encountered.
Preserver font sizing on orientation change in iPhone and iPad
html {
-webkit-text-size-adjust: 100%;
}The problem is that when You load the website on iPhone fonts looks normal. But when You rotate the screen and change orientation fonts become much more bigger than normal. It shouldn't suppose to happen. So here is quick fix for this problem:)
There is also second version of this solution. To use none instead of 100%. But when You use none it will disable zoom behavior in default browsers.
Remove input shadows and rounded corners on iOS devices
input {
-webkit-appearance: none;
border-radius: 0;
}Second problem is default styling provided by Web-kit browser on iPhone and iPad. All inputs have shadow and rounded corners. First rule turn off input appearance and it will remove shadows in our inputs.
Setting border radius to 0 will remove rounded corners in our inputs.