Как увеличить размер шрифта в мобильном коммутаторе?

Question

Я пытаюсь увеличить размер переключателя, потому что он недостаточно большой, чтобы читать на некоторых более мелких экранах. В идеале это будет примерно вдвое больше, но после определенного момента текст не станет больше.

HTML:

<div id="switch"> 
     <select name="flip-min" id="flip-min" data-role="slider"> 
      <option class="switchTxt" value="off">Images Off</option> 
      <option class="switchTxt" value="on">Images On</option> 
     </select> 
    </div> 

CSS:

#switch { 
     position:absolute; 
     bottom:1%; 
     left:1%; 
    } 
    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { 
     display: block; 
     padding: 0.9em 75px 0.9em 15px; 
    } 
    #switch .ui-slider-switch { 

     width:.2em; 
     font-size:800px; 
    } 
    .switchTxt { 
     font-size:500px; 
    } 

http://jsfiddle.net/rAGyC/

Answer 1

DEMO

Данный стандарт переключатель разметки:

<div id="switch"> 
    <select name="flip-min" id="flip-min" data-role="slider"> 
     <option class="switchTxt" value="off">Images Off</option> 
     <option class="switchTxt" value="on">Images On</option> 
    </select> 
</div> 

CSS-увеличивает размер ползунка, чтобы для большего текста, увеличивает ручку переключателя, чтобы соответствовать новому размеру и, наконец, увеличивает шрифт. 32px удваивает размер по умолчанию 16px:

#switch .ui-slider { 
    width: 240px; 
    height: 60px; 
} 
#switch .ui-slider-handle { 
    width: 40px; 
    height: 60px; 
    margin: 0; 
} 
#switch .ui-slider-inneroffset { 
    margin: 1px; 
    margin-right: 43px; 
} 
#switch .ui-slider-label { 
    font-size:32px; 
}