Like BBC and many other websites iPad shrink every element of layout to fit into Portrait mode automatically? Is it ok?

Or we should make the change in layout to reduce/remove/replace the items places in Portrait mode? it will take more time in development.

enter image description here

In this BBC website layout is same in both orientation it just shrinking in Portrait mode.

2 Answers 2


Ideally your layout should be able to cope with whatever aspect ratio the user chooses to use, whether that's landscape, portrait or square. Obviously with an iPad the user can only choose landscape or portrait.

Now how you do this is a matter of choice, but rather than hard code layouts for each mode it would be better to use a fluid layout that "sorts itself out". So in the case of the BBC website it scales the width of images and items to fit and lets the height take care of itself and as there is more content that can fit in the available space this means it has no horizontal scrollbar, but does have a vertical one.

You may have a minimum width for your site/application, but that should usually be less than the width of the iPad in portrait mode (in this case).

  • BBC website has vertical scroll-bar in both orientations. Aug 30, 2011 at 10:18
  • @Jitendra - I would expect that as there is more content that can fit in the space available.
    – ChrisF
    Aug 30, 2011 at 10:29
  • What about a max-width for users who decide to open your site full screen on their big screen?
    – MrWhite
    Aug 30, 2011 at 10:38

I, personally, feel that the iOS version of Safari does a very commendable job of handling aspect ratio changes by default. For most situations, I'd strongly advise to leave well enough alone and let the browser do its thing rather than try to reinvent the wheel yourself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.