Discovered something new tonight.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
is a lot different than:
<meta name="viewport" content="width=device-width, initial-scale=1">
When I started building out a responsive site for our organization, I ran into some snags with font sizes and such and kept running across “be sure to include” the top line of code when working with responsive design.
No one gave much explanation – just said it was needed.
You may have already figured this out – but it’s the last two attributes that make the biggest difference.
As I understand it now, initial-scale is the scale the site initial loads with.
Maximum-scale is the maximum size the user can scale the site to. So if you set a max of 1 – well there will be no pinch and zooming on your site.
Or if you set it to 2, 3 or 10, etc – that’s the max zoom a user can use.
So do us all a favor and leave that last bit (maximum-scale=1) off. Don’t limit your users. Let them navigate however they feel best.
