適用設備：iOS、Windows Mobile
在一些移動設備上，比方說iPhone,Windows Mobile，當用戶把手機切換到橫屏時，瀏覽器會自動地重置文本字體大小。這可能會對我們造成困擾，因為我們希望能夠完全掌控用戶界面的設計和瀏覽器對頁面的渲染結果。
新建ch02r02.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <script src="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> <img src="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 tables for layout. </figcaption> </figure> <footer> </footer> </body> </html>
在iPhone的豎屏渲染該文件時，一切正常。切換到到橫屏時，該頁面的字體大小會突然的放大，顯而易見，該頁面的字體大小被重置了，這並不是我們期望的結果。如效果圖：
解決：
在頁面的CSS部分加入：
html {
-webkit-text-size-adjust: none;
}
作用就是告訴WebKit引擎在渲染該頁面時不要自動調整文本字體大小。這樣再切換到橫屏時，字體大小就不會重置了。
但是如果在PC桌面訪問，或者通過其他的非移動設備的瀏覽器訪問，該你設置會導致頁面的縮放功能會被禁用。為了防止這種易用性的問題，可以把text-size-adjust的值變為100%,所以上面的例子改進為：
html {
-webkit-text-size-adjust: 100%;
}
除了iPhone之外，其他的移動設備同樣也有方法設置“text-size-adjust”屬性。
Windows Mobile
Windows Mobile IE中“text-size-adjust”屬性使用了不同前綴名，他們原本也打算使用webkit作為該屬性的前綴，因為這樣可以和其他瀏覽器保持一致，從而降低Web開發人員的工作難度，開發人員不需要再去考慮在頁面應該添加哪一些特殊前綴的“text-size-adjust”屬性來控制文本字體大小縮放的問題。更有趣的是，微軟認為，對於這樣屬性，最常用的情況應該是顯示的設置為none，不要重置文本字體大小。
微軟認為最好的方式是只實現以ms為前綴的版本而不是webkit版本。所以對前面的例子這樣改更完整：
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
另外，我們可以在例子中添加一行沒有前綴的“text-size-adjust”屬性，以便更好的應對未來變化：
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
px,em,誰更好？
在Web開發領域，關於應該使用px(像素)還是em(相對長度單位，相對於當前對象內文本的字體尺寸)的爭論不絕於耳，但是，這個問題在移動互聯網開發領域，爭論並沒有那么激烈，Yahoo!的用戶接口原本使用的單位是em，他們這么做的原因是IE6不支持px級別的縮放。但是，這在移動互聯網開發領域並不是問題，及時在PC的瀏覽器上，也不用太過在意這個問題，因為使用IE6 的用戶已經越來越少了。因此，在大部分場景下，你都可以使用像素設置字體大小，拋開使用em遇到的各種問題和那些煩人的計算。