Preserve Font-size with Landscape orientation

August 4, 2014 ” No Comments ”
Posted in CSS3, Responsive Design
Tags: iPhone text resizing, mobile development, responsive text
In apple mobile devices, the font-size rescales when the viewport changes to increase readability.
So the font-size will zoom larger from portrait to landscape orientation. To prevent this but to not restrict desktop uses from being able to make the font-size larger (zoom in), you can put this CSS property -webkit-text-size-adjust in a media query:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body {-webkit-text-size-adjust: 100%;} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     body {-webkit-text-size-adjust: 100%;}
By setting this property to 100%, you are telling WebKit to disable the automatic behavior, but still allow user-initiated zoom.

·jQuery Tips: :contains() selector
·CSS (11)
·CSS Tips (3)
·CSS3 (7)
·Dev Tools (3)
·Drupal (1)
·Git (1)
·HTML (4)
·HTML5 (11)
·HTML5 Tips (1)
·JavaScript (10)
·JavaScript Tips (22)
·jQuery (2)
·jQuery Tips (6)
·Mobile (3)
·PHP (1)
·Project Management (2)
·Responsive Design (9)
·Web (11)
·WordCamps (1)
·WordPress (5)
·Wordpress Tips (11)

Aly Chiman

Aly Chiman is a Blogger & Reporter at which covers a wide variety of topics from local news from digital world fashion and beauty . AlyChiTech covers the top notch content from the around the world covering a wide variety of topics. Aly is currently studying BS Mass Communication at University.

Leave a Reply

Your email address will not be published.