CODEWITHSUNDEEP
htmlioswebsafariviewport
Afrophysics
Afrophysics

Reputation: 599

Website loads zoomed in slightly on mobile devices despite proper viewport meta tag

Viewport meta tag is as follows:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Despite this, I need to manually zoom out on iphone/ipad to fit the site to screen. There's no min-widths preventing the site from scaling down to fit, so all that I can think of is perhaps iOS Safari calculates viewport size without accounting for its vertical scrollbar? Regardless, is there anyway of forcing it to load zoomed all the way out without disabling zoom functionality throughout?

Upvotes: 6

Views: 4734

Answers (2)

Afrophysics
Afrophysics

Reputation: 599

For anyone curious I solved it.

Case:

  • The landing page had a login,
  • iOS would automatically focus on the inputs because the font size was lower than 16px.
  • Because it's a single page app the view remained the same.

Solution:

  • Make sure your inputs have at least 16px font-size, else iPhone SE and such will zoom in so the text input is more visible.

Upvotes: 8

priyank rawat
priyank rawat

Reputation: 41

This will help :

@media screen and (device-aspect-ratio: 9/16) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"]{ font-size: 16px; } }

Upvotes: -1

Related Questions