移动html单选按钮文本大小按方向缩放

Question

几乎我在我的WebView应用程序（WebKIt，iOS上的Safari）中都有单选按钮，我希望在切换iDevice的方向时保留标签文本大小。我以纵向模式开始，并明确说明标签的文本大小，但是当我将设备旋转到横向模式时，标签大小加倍，尽管字体大小规格。

奇怪的是，普通文本行保持其大小;只有单选按钮标签按方向缩放。如果我在一行中的两个按钮之一上设置文本大小，则第一个符合规范，第二个按比例缩放。

码：

<span style="font-size:16px">Pick a Name</span>
<br>
<input type="radio" id="range" value="Bob!">
<span style="font-size:12px;">Bob!</span>
<input type="radio" id="range" value="Fred!">
<span style="font-size:12px;">Fred!</span>

现在想象一下，“Pick a Name”字符串在每个方向上的大小相同;它和按钮（和文本）保持相同的大小。鲍勃！和弗雷德！标签尺寸加倍。

废话 - 我需要10个重复点来发布图像。

想法？

Answer 1

我已经为你的两个Bob添加了ID！和弗雷德！

<span style="font-size:16px">Pick a Name</span>
<br>
<input type="radio" id="range" value="Bob!">
<span id = "bob" style="font-size:12px;">Bob!</span>
<input type="radio" id="range" value="Fred!">
<span id = "fred" style="font-size:12px;">Fred!</span>

更改方向时，最好使用css media query。

@media screen and (orientation: landscape) { 
     #bob {
         font-size: 12px;
     }
     #fred {
         font-size: 12px;
     }
}

这应该保留鲍勃的大小！和弗雷德！文本。

希望这可以帮助。