Viewport for ipad portrait [only]

I have built a responsive website and it encounters problem while rendering in portrait orientation on iPad

i.e It doesn't correctly fit in.

I have tried adjusting the viewport meta's parameter values but that also affects the whole rendering, including on mobile.

I used the following viewport meta in my website.

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

I had a similar issue just now, on a site that is 1550px wide on desktop but only 880px on mobile.

Things were working great with

<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />

combined with

<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />

(mobile.css readjust some element widths to fit nicely into the 880px mobile layout.)

Things looked good until I tested it on an iPad in the iOS Simulator. In portrait things looked alright, but in landscape orientation some elements (specifically those with width: 100%) adjusted to the viewport width, while some didn't (that one element with width: 1550px). This meant that when scrolling right (or zooming out) to view the entire 1550px element, the elements with width: 100% were left dangling from the left side, only about half as wide as they should be.

The solution was far from obvious, but here's how I solved it:

base.css

body{
    width: 100%;
    min-width: 1550px; 
}

mobile.css

body{
    min-width: 100%; 
}

This explicitly sets the miniumum width of the body element to 1550px for all devices wider than 880px, including tablets that take the viewport meta tag into account. When viewed on a mobile device with a width less than 880px, the width of the body element is reset to simply 100%, i.e. the viewport width.

Hope this will help someone out there struggling with different layouts for different devices.