CODEWITHSUNDEEP
htmlcss
Zachmalter
Zachmalter

Reputation: 75

HTML No Zoom On Mobile

On my site zaxapps when you click on any of the inputs or fields it zooms out on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

I added this code but it dosent prevent it. Any ideas?

Upvotes: 2

Views: 1453

Answers (1)

cyberbit
cyberbit

Reputation: 1365

This is caused by the site thinking the orientation has changed from portrait to landscape due to the keyboard being opened.

The keyboard covers some of the site, which in takes up screen real estate, which causes enough of a resolution change for it to be detected as landscape mode. If the keyboard is hidden somehow, or a Bluetooth keyboard is connected, the site looks correct. I've attached screenshots to illustrate the issue.

After some searching around, I found this site. It appears that adding an orientation media query may solve this resolution loophole. Here's their example for the iPhone 6 in portrait:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

Update: Also check out this CSS-Tricks page, they have similar information with more cross-platform examples.

With keyboard open:

Site with keyboard open

With keyboard hidden (I simulated this by connecting a Bluetooth keyboard):

Site with keyboard hidden

Upvotes: 2

Related Questions