With our meta viewport problem fixed, no browsers are now zooming the page, so we can set about fixing the design for different viewports. In the CSS, we'll add a media query for devices such as tablets (for example, iPad) that have a viewport width of 768 pixels in portrait view (as the landscape viewport width is 1024 pixels, it renders the page fine when loaded in Landscape view).
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
}Our media query is re-sizing the width of the wrapper, header, footer, and navigation elements if the viewport size is no larger than 768 pixels. The following screenshot shows how this looks like on our iPad:
I'm actually quite encouraged by that. The content now fits on the iPad display (or any other viewport no larger than 768 pixels) with no clipping. However, we need to fix the Navigation area as the links are extending off the...