Плохое отображение картинки с телефона

Всем привет!
Есть вот такой код

Код (Text):

1. echo '
2. <div class="hp">
3.    <div class="hp_t">
4.        <div class="hp_sc" style="width: '.sprintf('%d',$udata[hp]/$udata[hpall]*100).'px;">&nbsp;</div>
5. </div>
6.    <div class="hp_b" title="'.sprintf('%02.1f',$udata[hp]/$udata[hpall]*100).'%'.'">
7.        <div class="hp_b_l">HP</div>
8.        <div class="hp_b_r"><center>'.$udata[hp].' / '.$udata[hpall].'</center></div>
9.    </div>
10. </div>
11. <div class="hp_cl">&nbsp;</div>';

И CSS код

Код (Text):

1. .hp { width: 100px; height: 12px; color: #FFFFFF; background-color: #FFFFFF; overflow: hidden;}
2. .hp_t { height: 13px; background: #fff url(hp2.gif) repeat-x; font-size: 2px; }
3. .hp_sc { height: 13px; background: #CFCFCF url(hp.gif) repeat-x; font-size: 2px; }
4. .hp_b { margin-top: -13px; height: 13px; text-align: right; font-size: 10px; }
5. .hp_b_l { float: left; width: 11px; height: 12px; font-size: 8,5px; }
6. .hp_b_r { margin-top: 1px; float: left;  width: 77px; height: 12px; font-size: 8px; }
7. .hp_cl { clear: both; height: 1px; font-size: 1px; }

Этот код генерирует картинку.
С компьютера все красиво смотрится, а вот с телефона картинка делается меньшой чем на компьютере и текст на ней очень большой.
Как сделать чтоб отображалось все как на компьютере так и на телефоне.

Добавлено спустя 3 минуты 12 секунд:
или хотя чтоб текст был точно на картинке, а не выходил за нее и не был большой.