Making My Website Fit the iPhone Duo

On the iPhone Duo’s closed screen, Safari gives my site a short page with its controls running down the right side. The homepage still worked, but its welcome section took up more of that limited height than it needed to. Open the Duo in landscape and the problem changes: there is room for the full navigation, but the viewport is short again. Open it in portrait and the page has a more familiar, taller reading layout.The image above compares all three views from my Duo. The individual captures appear alongside the changes below. They show a boundary I had to keep straight while working on the site: I can adjust what happens inside Safari’s page viewport. I cannot move Safari’s own controls with my CSS.The viewport is the useful clueWebKit’s Safari 27.1 notes list the Duo’s closed outer viewport at 382 × 580 CSS pixels in portrait. The open inner display is 669 × 867 in portrait and 951 × 585 in landscape. Those heights are WebKit’s small viewport height measurements, with the browser…