We are trying to make a site more responsive to browser widths, rather than taking users to subdomains for smartphones.
We do have issues where our pages are at 950px, so we need to be using viewport, but having never used it before, I am at the learning stage! But am 100% confident that once I crack it, it's going to develop A LOT of work for me, so I'm all ears.
I've set the CSS to show different layouts based on browser size, but on devices like iPad, you have 768px on portrait, so I need to do some kind of zoom, and I understand @viewport does this.
So how does it work? I'm sure I don't zoom 'down' my page to be 768px all the time, so it must zoom it down to a minimum level, before it switches to the 'mobile' format.
Code: Select all
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=768"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
So for example, on my iPad in Landscape, in theory it displays it at normal size (950px).
But turn it Portrait, it and zooms 'out'. But how?