input на мобильных устройствах

[ivanviar]

Добрый день,

Помогите, пожалуйста. На мобильных устройствах при нажатии на input всплывает клавиатура, а само поле ввода увеличивается до конских размеров, сдвигая все остальное: т.е. кроме это поля, по сути, больше ничего не видно. Можно ли сделать так, чтобы при нажатии на input только появлялась клавиатура, а все размеры и масштабы оставались как есть.

Спасибо.

Иван

[Great Rash]

Для начала не плохо бы указать. что за мобильное устройство? Может это смарт-часы или MP3-плеер?

Опять же неплохо бы рассказать какая ОС установлена на этом устройстве.

Ну и совсем хорошо. когда понятно что за чудо-браузер вы там используете.

[ivanviar]

Простой смартфон андроид (4.2, Lenovo a390), Браузер штатный, андроидовский, так и называется - "Браузер".

Пробовал и viewport задавать и в css все стили для :focus снимать. Все равно есть этот зум при наведении на инпут.

Edited December 22, 2015 by ivanviar

[Great Rash]

Такой мета-тег есть? Ширина сайта случаем не шире вьюпорта?

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=0" />

[ivanviar]

Ширина сайта в данном случае 600px.

 

@media all and (max-device-width: 790px){

body {

min-width:600px;

}

 

Дальше он масштабируется, видимо, под ширину 480px (ширина экрана телефона).

 

Viewport не задан. Пробовал задавать viewport c фиксированным значением (не device-width) заведомо превышающем ширину сайта - не помогает.

Для сравнения попробовал на galaxy tab 2 (ширина экрана 600px), в том же браузере. Там тоже есть зум, но по крайней мере поле не начинает вылезать за ширину экрана.

 

Сайт сам по себе правильно отображается на экране телефона. Единственная проблема - этот зум на инпуте. Это может быть связано, что инпут у меня в блоке с position:fixed? Хотя менял под мобильные устройства на absolute - данную проблему это не решает.

Edited December 22, 2015 by ivanviar

[Great Rash]

Надо обязательно задавать мета-тег. Иначе будет вот такого рода геморрой.

[vladmih]

в метатеге, user-scalable=no, тогда вообще не будет увеличивать, или в инпуте размер шрифта не менее 16 px по-моему. Тогда не будет при фокусе приближать.

была такая же таска в разработке мобильной версии проекта, нашел пока что такие решения...
 

Edited December 22, 2015 by vladmih

[Нарек]

user-scalable=no вот для тех кто так пишет отдельный котел в аду )

[vladmih]

user-scalable=no вот для тех кто так пишет отдельный котел в аду )

Пффф, а как же верстка приложений на html под мобильное устройство? Там ты часто замечал масштабирование? Да и вообще часто ли вы увеличивали масштаб у нормальных веб приложений?

[Нарек]

Пффф, а как же верстка приложений на html под мобильное устройство? Там ты часто замечал масштабирование?

Не часто, но иногда хочется.

Да и вообще часто ли вы увеличивали масштаб у нормальных веб приложений?

Да, я плохо вижу. 

[Great Rash]

user-scalable=no вот для тех кто так пишет отдельный котел в аду )

Если ты делаешь адаптивный сайт, то ты обязан так писать. Иначе у тебя не адаптивный сайт, а непонятная хрень. Другое дело, что проектирование адаптивного сайта - задача непростая и её никто в России делать не умеет. Ну по крайней мере я такого человека не видел никогда в глаза У хорошего адаптивного сайта всё читабельно несмотря на отсутствие возможности зума.

[vladmih]

 

user-scalable=no вот для тех кто так пишет отдельный котел в аду )

Если ты делаешь адаптивный сайт, то ты обязан так писать. Иначе у тебя не адаптивный сайт, а непонятная хрень. Другое дело, что проектирование адаптивного сайта - задача непростая и её никто в России делать не умеет. Ну по крайней мере я такого человека не видел никогда в глаза У хорошего адаптивного сайта всё читабельно несмотря на отсутствие возможности зума.

 

Подписываюсь под каждым словом.

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