когда текстовое поле сфокусировано, CSS @media перестает работать на мобильных устройствах (Samsung Galaxy S4)

У меня есть текстовое поле на веб-странице, и я написал запрос css @media (особенно для Samsung Galaxy S4) для этой страницы. Когда эта страница загружается, все работает нормально на всех устройствах @media (кроме Samsung Galaxy S4), даже когда текстовое поле сфокусировано.

Когда я тестировал его на этом устройстве, страница выглядит так же (при загрузке страницы), как и на других устройствах, но когда я фокусируюсь на текстовом поле, все элементы (изображения, текст и т. д.) на этой странице смещаются.

Мой медиа-запрос CSS (для Samsung Galaxy S4) в файле style.css:

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-device-width : 360px) and (max-device-height : 640px) and (orientation : portrait) { /*.........*/ }

samsung-mobile media-queries
person Ram    schedule 06.06.2014    source источник
comment
@Satya: пожалуйста, не используйте backticks для форматирования кода на вещах, которые не являются кодом - это не общий маркер. Для названий продуктов и технологий предпочтительна начальная заглавная буква (или все заглавные буквы для акронимов). Спасибо!   -  person halfer    schedule 18.04.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я решил это сам.

Что вам нужно сделать, так это, какие бы стили вы ни задавали в своем медиа-запросе, поместите те же стили в этот медиа-запрос, но без какой-либо ориентации.

Например-

Медиа-запрос с ориентацией:

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-device-width : 360px) and (max-device-height : 640px) and (orientation : portrait) { 
/*........your styles........*/}

Тот же медиа-запрос без какой-либо ориентации:

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-device-width : 360px) and (max-device-height : 640px) { 
/*........same styles that you have written in your media query........*/}

Примечание. Поместите оба вышеупомянутых медиа-запроса в свой файл CSS и задайте одинаковые стили для обоих медиа-запросов.

person Ram    schedule 17.06.2014