когато текстовото поле е фокусирано, 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) { /*.........*/ }

person Ram    schedule 06.06.2014    source източник
comment
@Satya: моля, не използвайте backticks за форматиране на код върху неща, които не са код - това не е общ маркер. За имена на продукти и технологии се предпочита начална главна буква (или само главни букви за акрионими). Благодаря!   -  person halfer    schedule 18.04.2016


Отговори (1)


Реших го сам.

Това, което трябва да направите, е каквито и стилове да давате във вашата медийна заявка, да поставите същите стилове в тази медийна заявка, но без никаква ориентация.

Например-

Медийна заявка с ориентация:

@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