Applicable devices: IOS, Windows Mobile
On some mobile devices, such as Iphone,windows Mobile, when the user switches the phone to a horizontal screen, the browser automatically resets the text font size. This can be confusing for us because we want to have full control over the design of the user interface and the rendering of the page by the browser.
New ch02r02.html
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <Scriptsrc= "Modernizr-1.7.min.js"></Script> <style>Figure , Figcaption, header{Display:Block;margin:0 Auto;text-align:Center;}</style> </Head> <Body> <Header>HTML5 Logo</Header> < Figure> <imgsrc= "Img/html5_badge_128.png" /> <figcaption>It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It's the standard ' s standard, a pennant for progress. And it certainly doesn ' t use the tables for layout. </figcaption> </ Figure> <Footer> </Footer> </Body></HTML>
When the file is rendered on the iphone's vertical screen, everything is fine. When I switch to the horizontal screen, the font size of the page will suddenly enlarge, it is obvious that the font size of the page has been reset, which is not the result we expected. Such as:
Solve:
In the CSS section of the page, add:
HTML {
-webkit-text-size-adjust:none;
}
The function is to tell the WebKit engine not to automatically adjust the text font size when rendering the page. When you switch to a horizontal screen again, the font size is not reset.
However, if you access it on a PC desktop or through a browser other than a mobile device, your settings will cause the page's zoom function to be disabled. To prevent this usability problem, the value of Text-size-adjust can be changed to 100%, so the above example is improved as follows:
HTML {
-webkit-text-size-adjust:100%;
}
In addition to the iphone, other mobile devices also have the option to set the "Text-size-adjust" property.
Windows Mobile
The "Text-size-adjust" attribute in Windows Mobile ie uses a different prefix name, and they originally intended to use WebKit as a prefix for that property because it would be consistent with other browsers, which would reduce the difficulty of the web Developer's work. Developers do not need to consider the "Text-size-adjust" attribute of the special prefix that should be added to the page to control the text font size scaling problem. More interestingly, Microsoft believes that for such attributes, the most common scenario should be to display a setting of none and not reset the text font size.
Microsoft believes that the best way is to implement only the MS-prefixed version rather than the WebKit version. So the previous example is more complete:
HTML {
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
In addition, we can add a row of "text-size-adjust" attributes without a prefix in the example to better cope with future changes:
HTML {
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
}
Px,em, who's better?
In the field of web development, there is a buzz about whether PX (pixels) or EM (relative length units, relative to the font size of the text within the current object) should be used, but the issue is not so intense in mobile internet development, and Yahoo! 's user interface was originally using EM, The reason they do this is that IE6 does not support PX-level scaling. However, this is not a problem in the field of mobile Internet development, in a timely manner on the PC browser, do not care too much about this problem, because users of the use of IE6 has become less. So, in most scenarios, you can use pixels to set the font size , throw away all the problems that you encounter with EM and those annoying calculations.
HTML5 Mobile Web Development (eight)--Avoid text font size reset
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
