Portrait change to landscape problem for Responsive Web Design

[angotsai]

I met a problem for Responsive Web Design. I hope I can get a good answer or solution on here.

I have a media qurey css for mobile-device and it handles portrait and landscape.

codes as below

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait )
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape)
<code></code>

My web-site can work on that but ..

when I click on the input-text with portrait and show the simulation keyboard ,

mobile device will rotate from portrait to landscape right now and it will break my web-site template.

(It’s still on portrait but rotate to landscape).

So about the issue , how to design the “media qurey css” or other solution for it ???

thanks.

[Paulie_D]

Without seeing the site in question we can’t comment?

Do you have a link?

[angotsai]

Here is my site:
http://cloudgood.org

It’s a Chinese language web-site ,
please use smartphone to browser with portrait ,
and touch , focus on the “User Login” on top of homepage,
your will find the template that change to landscape,
please try it , thanks.

[Author]

Posts