CODEWITHSUNDEEP
media-queriesvirtual-keyboardgoogle-nexus
Bhuvana
Bhuvana

Reputation: 194

Google Nexus Portrait changing to landscape on keypad

We are developing a responsive WEBSITE that has two views. One for tablets PORTRAIT : Ipad and Google Nexus and one for mobiles: Iphone and Samsung S3.

Google Nexus Portrait should also be on tablet view of the webpage.

These are the media queries used.

For MOBILE @media only screen and (max-width : 768px) and (orientation : landscape), only screen and (max-width : 599px) and (orientation : portrait)

For TABLET PORTRAIT @media only screen and (min-width : 600px) and (max-width : 1024px) and (orientation : portrait)

When we open the site in Google Nexus Portrait View, it shows proper tablet version of the site. When we click on input field, the virtual keypad is shown and the device goes into landscape mode. So for the width of the device (600px) and landscape : mobile view is shown. Once we close keypad it returns back to Portrait and tablet view is shown.

Device going into landscape occurs because when keypad is shown the width of the screen becomes greater than the screen height. (As height got reduced because of keypad)

Do you have any solution to differentiate tablet and mobile? Or is there any work-around for this behavior of Nexus? (I am talking about web application and not native.)

Upvotes: 1

Views: 533

Answers (1)

rojaswilmer
rojaswilmer

Reputation: 120

Hello I fix that problem using the media queries for height @media (max-height: 615px){} , you can detect using height and width and try to fix your problem for me that work good.-

Upvotes: 0

Related Questions