Непонятный сдвиг области на устройствах Android

[bizlis]

Прошу помощи профессионалов. Есть код:

<style>* { max-width:100%; margin:1; padding:1; border:none; font-family: Arial, sans-serif; color:#332c2b}body {font-size: 15px; line-height:1.5; background-color:white; overflow-x: hidden;color:#f7f7f7;}h3 { font-size: 16px; color:#f16022}h2 { font-size: 20px; color:#f16022}#allwidth {width: 100%;border-bottom: 1px solid rgba(255, 255, 255, 0.4);text-align: left;}input, select { color: black; border-radius: 3px; padding:3px; border: 1px solid #f16022; box-shadow: inset 1px 0 #f16022, 0 1px 0 #f16022 ;}#allwidthbt {display: block;width: 100%; height: 39px;margin: 10px auto;font-size: 14px;text-align: center;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4) ;border: 1px solid rgba(255, 255, 255);border-radius: 5px;background-color:#f16022; color: white; }</style><h3 style="text-align:center">Введите ваши данные для определения необходимого для вас количества калорий в сутки</h3><div><form name="CalcForm"><div ><span style="font-size:14px"><strong>Пол:</strong> </span><select id="allwidth" name="gender"><option value="Мужской">Мужской</option><option value="Женский">Женский</option> </select></div><div <span style="font-size:14px"><strong>Возраст (лет):</strong> <input  id="allwidth" name="age" type="number" /></span></div><div><p><span style="font-size:14px"><strong>Физическая активность:</strong></span></p><div><span style="font-size:14px"><input name="faction" type="radio" value="v1" CHECKED/> не занимаюсь спортом </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v2" /> занимаюсь спортом нерегулярно </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v3" /> занимаюсь спортом 1-3 раза в неделю </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v4" /> занимаюсь спортом 3 и более раз в неделю не менее 2 часов за занятие </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v5" /> занимаюсь профессиональным спортом </span></div></div><div><span style="font-size:14px"><strong>Вес (кг):</strong> <input id="allwidth" name="ves" type="number" /></span></div><div><span style="font-size:14px"><strong>Рост (см):</strong> <input id="allwidth" name="rost" type="number" /></span></div><h2 style="text-align:center">ИТОГО: <span class="result" id=kkal></span> ККАЛ</h2><span style="font-size:10px" class="result" id=kkaltext></span><div style="text-align: center;"><span style="font-size:14px"><input id="allwidthbt" type="button" value="Рассчитать" onclick="calcResult()"/></span></div></form></div><script type="text/javascript">function calcResult(){  var kf=0;  switch(document.CalcForm.faction.value)   {    case 'v1': {kf=1;} break;    case 'v2': {kf=1;} break;     case 'v3': {kf=1;} break;    case 'v4': {kf=1.2;} break;    case 'v5': {kf=2.5;} break;  }  var gn = document.CalcForm.gender.options[document.CalcForm.gender.selectedIndex].index;  switch (gn)  {    case 0: {kkal.innerHTML= (665+(9.5*document.CalcForm.ves.value)+(1.8*document.CalcForm.rost.value)-(4.7*document.CalcForm.age.value)*kf).toFixed(2); } break;    case 1: {kkal.innerHTML= (66.5+(13.7*document.CalcForm.ves.value)+(5*document.CalcForm.rost.value)-(6.8*document.CalcForm.age.value)*kf).toFixed(2); } break;  }kkaltext.innerHTML="Это примерный расчет калорий без учета ваших индивидуальных особенностей, связанных с данными , которые не учитываются в представленной формуле. В случае аллергий, заболеваний и других индивидуальных особенностей необходим индивидуальный расчет и консультация врача.";}</script>

Данный код был собран на основе различных примеров из интернета.
Даю ссылку на картинку, на которой видно как это выглядит, и что происходит после появления клавиатуры и скролинга (появляться непонятная область? то внизу, в верху, зависит от того, куда скоролим).
Как от этого избавиться, может в коде что-то не так? Пожалуйста помогите, срочно необходимо решить эту проблему.

https://www.dropbox.com/s/f471j7vttbja6d3/javascript_code_app.jpg?dl=0

[horprogs]

Выложите на http://jsfiddle.net/

[bizlis]

  On 9/24/2015 at 12:14 PM, horprogs said:

Выложите на http://jsfiddle.net/

 

готово http://jsfiddle.net/m9pr904j/

но работа кода на ПК меня не интересует, проблема возникает на мобильных телефонах, на устройствах под Android

Edited September 24, 2015 by bizlis

[horprogs]

Смотрите

<h2 style="text-align:center">ИТОГО: <span class="result" id=kkal></span> ККАЛ</h2><span style="font-size:10px" class="result" id=kkaltext></span>

Возьмите в кавычки id="kkal" и id="kkaltext". Похоже в этом дело

 

И код проверьте валидатором, там есть ошибки

Edited September 24, 2015 by horprogs

[bizlis]

  On 9/24/2015 at 12:31 PM, horprogs said:

Смотрите

<h2 style="text-align:center">ИТОГО: <span class="result" id=kkal></span> ККАЛ</h2><span style="font-size:10px" class="result" id=kkaltext></span>

Возьмите в кавычки id="kkal" и id="kkaltext". Похоже в этом дело

 

И код проверьте валидатором, там есть ошибки

 

кавычки поставил, проверил, не помогает

[horprogs]

Обновите код и скиньте еще раз.

Я посмотрел на андроиде, у меня исчезла эта ошибка после правки.

[bizlis]

  On 9/24/2015 at 12:55 PM, horprogs said:

Обновите код и скиньте еще раз.

Я посмотрел на андроиде, у меня исчезла эта ошибка после правки.

<style>* { max-width:100%; margin:1; padding:1; border:none; font-family: Arial, sans-serif; color:#332c2b}body {font-size: 15px; line-height:1.5; background-color:white; overflow-x: hidden;color:#f7f7f7;}h3 { font-size: 16px; color:#f16022}h2 { font-size: 20px; color:#f16022}#allwidth {width: 100%;border-bottom: 1px solid rgba(255, 255, 255, 0.4);text-align: left;}input, select { color: black; border-radius: 3px; padding:3px; border: 1px solid #f16022; box-shadow: inset 1px 0 #f16022, 0 1px 0 #f16022 ;}#allwidthbt {display: block;width: 100%; height: 39px;margin: 10px auto;font-size: 14px;text-align: center;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4) ;border: 1px solid rgba(255, 255, 255);border-radius: 5px;background-color:#f16022; color: white; }</style><h3 style="text-align:center">Введите ваши данные для определения необходимого для вас количества калорий в сутки</h3><div><form name="CalcForm"><div ><span style="font-size:14px"><strong>Пол:</strong> </span><select id="allwidth" name="gender"><option value="Мужской">Мужской</option><option value="Женский">Женский</option> </select></div><div <span style="font-size:14px"><strong>Возраст (лет):</strong> <input  id="allwidth" name="age" type="number" /></span></div><div><p><span style="font-size:14px"><strong>Физическая активность:</strong></span></p><div><span style="font-size:14px"><input name="faction" type="radio" value="v1" CHECKED/> не занимаюсь спортом </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v2" /> занимаюсь спортом нерегулярно </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v3" /> занимаюсь спортом 1-3 раза в неделю </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v4" /> занимаюсь спортом 3 и более раз в неделю не менее 2 часов за занятие </span></div><div><span style="font-size:14px"><input name="faction" type="radio" value="v5" /> занимаюсь профессиональным спортом </span></div></div><div><span style="font-size:14px"><strong>Вес (кг):</strong> <input id="allwidth" name="ves" type="number" /></span></div><div><span style="font-size:14px"><strong>Рост (см):</strong> <input id="allwidth" name="rost" type="number" /></span></div><h2 style="text-align:center">ИТОГО: <span class="result" id="kkal"></span> ККАЛ</h2><span style="font-size:10px" class="result" id="kkaltext"></span><div style="text-align: center;"><span style="font-size:14px"><input id="allwidthbt" type="button" value="Рассчитать" onclick="calcResult()"/></span></div></form></div><script type="text/javascript">function calcResult(){  var kf=0;  switch(document.CalcForm.faction.value)   {    case 'v1': {kf=1;} break;    case 'v2': {kf=1;} break;     case 'v3': {kf=1;} break;    case 'v4': {kf=1.2;} break;    case 'v5': {kf=2.5;} break;  }  var gn = document.CalcForm.gender.options[document.CalcForm.gender.selectedIndex].index;  switch (gn)  {    case 0: {kkal.innerHTML= (665+(9.5*document.CalcForm.ves.value)+(1.8*document.CalcForm.rost.value)-(4.7*document.CalcForm.age.value)*kf).toFixed(2); } break;    case 1: {kkal.innerHTML= (66.5+(13.7*document.CalcForm.ves.value)+(5*document.CalcForm.rost.value)-(6.8*document.CalcForm.age.value)*kf).toFixed(2); } break;  }kkaltext.innerHTML="Это примерный расчет калорий без учета ваших индивидуальных особенностей, связанных с данными , которые не учитываются в представленной формуле. В случае аллергий, заболеваний и других индивидуальных особенностей необходим индивидуальный расчет и консультация врача.";}</script>

обновил, проверил, но к сожалению проблема осталась