移动 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 screen and (orientation: landscape) { 
     #bob {
         font-size: 12px;
     }
     #fred {
         font-size: 12px;
     }
}

这应该保持 Bob 的大小！和弗雷德！文本。

希望这会有所帮助。