Мобильный HTML-переключатель Размер текста масштабируется с ориентацией - PullRequest
Новая
       37

Мобильный HTML-переключатель Размер текста масштабируется с ориентацией

0 голосов
/ 17 сентября 2018

почти у меня есть переключатели в моем приложении WebView (WebKIt, Safari на iOS), размер текста метки которого я хотел бы сохранить при переключении ориентации 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>

Теперь представьте, что строка «Выберите имя» имеет одинаковый размер для каждой ориентации; он и кнопка (и текст) остаются одинакового размера. Боб! и Фред! этикетки двойного размера.

Дерьмо - мне нужно 10 точек повторов для публикации изображений.

Идеи

1 Ответ

0 голосов
/ 17 сентября 2018

Я добавил 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;
     }
}

Это должно сохранить размер Боба! и Фред! текст.

Надеюсь, это поможет.

...