I have a textbox on a web page and I have written a css @media query (particularly for Samsung Galaxy S4) for this page. When this page gets loaded, everything is working fine in all @media devices (except Samsung Galaxy S4) even when textbox is focused.
When I tested it on this device, page looks same (on page load) as in other devices, but when I focus on textbox, all elements (images, text etc.) on this page are getting shifted.
My CSS media query (for Samsung Galaxy S4) in style.css file:
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-device-width : 360px) and (max-device-height : 640px) and (orientation : portrait) { /*.........*/ }
I solved it myself.
What you need to do is, whatever styles you are giving in your media query, put same styles in that media query but without any orientation.
For example-
Media Query with orientation:
@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........*/}
Same media query without any orientation:
@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........*/}
Note: Put both above media queries in your CSS file and give same styles for both media queries.