Непонятное сжатие полей ввода на смартфоне

[alleclf]

Столкнулся с непонятным поведением сайта на смартфоне.

Сайт выглядит нормально пока не кликнуть на поле ввода. Когда выезжает клавиатура сайт сжимается, будто бы добавляются какие-то отступы по краям.

 

Вот скрины с мобильника. На первом всё нормально, на втором при клике на инпут - всё сжалось.

 

 

 

в живую можно глянуть на сайте - ссылка на втором скрине (раздел "контакты").

 

Кстати, на компьютере всё работает нормально, даже если окно сжать до 320х480.

Edited September 2, 2015 by alleclf

[Jack_V]

Нет возможности проверить со смартфона, но что  это такое у вас? Пробовали без подобных правил?

p {    display: block;    -webkit-margin-before: 1em;    -webkit-margin-after: 1em;    -webkit-margin-start: 0px;    -webkit-margin-end: 0px;}

[alleclf]

  On 9/2/2015 at 3:21 PM, Jack_V said:

 

Нет возможности проверить со смартфона, но что  это такое у вас? Пробовали без подобных правил?

p {    display: block;    -webkit-margin-before: 1em;    -webkit-margin-after: 1em;    -webkit-margin-start: 0px;    -webkit-margin-end: 0px;}

я не нахожу такого кода

Нашел, это гугл хром от себя добавляет.

Я пользуюсь firefox developer edition там такого нет.

[kattiperk]

Эх, reset не делали

[alleclf]

  On 9/2/2015 at 7:12 PM, kattiperk said:

Эх, reset не делали

я обнулил абзац - padding и margin - 0, но хром всё-равно свои стили дописывает.

[alleclf]

Непонятная штука получается. В горизонтальной ориентации сжатия НЕ происходит.

Как выяснилось разница только в отступах основного контента - в вертикальной ориентации - 10px, в горизонтальной - 30px.

 

Как только сделать везде по 30пх - всё работает нормально.

То есть, там где есть поля ввода должен быть отступ минимум 30пх.

 

Что это? С чего вдруг понадобился этот отступ?

[kattiperk]

Не знаю, не видела такого. Сейчас тоже формы делала, на моих устройствах всё отлично.

Может всё-таки магия reset'a?

[alleclf]

  On 9/3/2015 at 8:17 AM, kattiperk said:

Не знаю, не видела такого. Сейчас тоже формы делала, на моих устройствах всё отлично.

Может всё-таки магия reset'a?

дай свой резет, я отдельным файлом подключу попробую

[kattiperk]

Держи-те

github.com/necolas/normalize.css

[alleclf]

  On 9/3/2015 at 12:19 PM, kattiperk said:

Держи-те

github.com/necolas/normalize.css

Спасибо, но не в этом дело.

 

Всё-таки в моем коде что-то не то ((

[kattiperk]

Но у меня тоже формы и тоже chrome. Он себя отлично ведет

[Jack_V]

Может сам девайс имеет свои стили для браузера? Так на вскидку.

[alleclf]

  On 9/3/2015 at 8:03 PM, Jack_V said:

Может сам девайс имеет свои стили для браузера? Так на вскидку.

Смарт - Sony Xperia M Dual C2005.

Браузер - Хром, не думаю что он зависит от модели телефона.

[kattiperk]

От ОС скорее

Ну вот у себя смотрела, хром так даёт тот же

p {    display: block;    -webkit-margin-before: 1em;    -webkit-margin-after: 1em;    -webkit-margin-start: 0px;    -webkit-margin-end: 0px;}

Но он обнуляется reset'ом. Кстати, в head

<link rel="stylesheet" href="css/normalize.css"> - перед основным файлом стилей

[alleclf]

Я добавлял стили "normalize.css" - ничего не изменилось, так же сжимается.

 

Да и просто обнулял самодеятельность хрома

p {    display: block;    -webkit-margin-before: 0px;    -webkit-margin-after: 0px;    -webkit-margin-start: 0px;    -webkit-margin-end: 0px;}