Testing some site on iPad 2 I’ve noticed that several particular pages in portrait orientation mode were shown with different widths. My site has fixed width of 980 pixels, and content area of 960px, according to advisable iPad size, so I anticipated no width problems at all. Landscape mode was completely ok.
Later I’ve found, that it happens only on pages with less content, when a page took less then iPad Portrait oriented screen height. So to fix this bug I added some CSS media query, and it worked indeed.
/****** IPAD PORTRAIT MODE ******/
@media all and (device-width: 768px)
and (device-height: 1024px)
and (orientation:portrait)
{
html {
min-height:1200px; /* fixes bug in portrait mode */
}
}
/******* EOF IPAD PORTRAIT *******/Please check with other generations of iPad. I guess it happens because of some scroll bar width bug or something. Not sure exactly…
