Font size relative to parent box height
I have block level elements with its height property set in %. Inside these block level elements are <span>s with text. Example:
<body style="height: 100%;">
<menu styl开发者_如何转开发e="height: 10%;">
<button style="display: block; height: 100%;">
<span style="font-size: 4em; line-height: 200%;">text</span>
</button>
</menu>
</body>
This looks fairly well on a mobile browser, except when I rotate the device (that is, once the body.onorientationchange event kicks in), the text becomes too big.
So my question is, how can I specify the text size relative to the height of the parent element?
I've run into similar issues on the iPhone and it wasn't the height causing the issue, but rather an option of mobile webkit.
Try setting this
body {
-webkit-text-size-adjust: none;
}
This will disable font size change on rotation, which pretty much solves my problem. Borrowed from here.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
UPDATE: changed from semicolons to commas as Mark suggested.
加载中,请稍侯......
精彩评论