 |
| Safari for iOS |
Also, it could be even more annoying when you are Switching orientation from portrait to landscape on your iDevice which another issue with Safari that increases Text Size while not using the extra space to display more of the page. As a blog owner I have faced this and I managed to get over it by using simple two tricks and I am going to show you how.
What is the right CSS Code?
First of all, before starting to follow that Article make sure you are using the correct CSS Code to Text Site Adjustment. So, beware and DO NOT use that piece of code Below for your CSS Body Element.body {
-webkit-text-size-adjust:none;
}
Because of that it prevents WebKit-Based browsers from resizing text and it will not be adjusted correctly. Instead, what I recommend is using that code but with an other value like this.
body {
-webkit-text-size-adjust:100%;
}
By setting -webkit-text-size-adjust to 100% instead of none Safari keeps the same text size after an orientation change, while still allowing the user to zoom in if they need to. Setting it to 100% also seems to leave user resizing of text alone unlike none.How to fix Page Width of Safari for iOS?
You can make any browser set your site's Page Width automatically to fit the resolution and fill up the whole screen of any device that is browsing it by putting a Meta-Tag above the <head> Code Line.<meta name="viewport" content="width=device-width" />What this does is to make the browser fills up a space that is exactly equal to the device's Physical Width. As long as your layout is fluid or you use media queries to provide different layouts for different Viewport Widths this will fix the first issue of Page Flexibility nicely without the user having to zoom in to see the text.
How to fix Text Auto-Scaling of Safari for iOS?
You can prevent Safari from increasing Text Size when switching an iDevice from Portrait to Landscape by the same code but adding some more tricks into it so here is what I recommend.<meta name="viewport" content="width=device-width, initial-scale=1" />This will fix the second issue of Switching Orientation nicely without screwing the Text Size or the Page Width.