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:
CSS
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body {-webkit-text-size-adjust: 100%;} }
1
2
3
4
@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
Categories
·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)
·
·
·
