Alternative to a 100% viewport height page design in mobile landscape mode

[ajm]

I was given some designs for a quasi social network that I need to build with CSS and HTML. We'll have another developer to do the JavaScript work. For simplicity's sake, let's say each user's profile consists of two views - one is the user's main landing page which is a full-screen photo, some short details about them, and a message input box. Then if you swipe to the left, you'll see the user's other view - a details page. The mocks require that each view is 100% of the device's viewport height, and the views are not scrollable i.e. the height is fixed to the viewport's height. If you want to browse other profiles, you would swipe up to go to the next profile. Also assume that the content on the profile details page will be limited to a number of characters for each section so that it will fit (the designer has already determined what that limit is and what minimum phone size they have optimized the design for.).

If you're viewing this on a phone and turn it to landscape mode, the phone's height will change to a much shorter height. Aside from using CSS and/or JavaScript to make the views scrollable (i.e. not fixed to the viewport height), what are some alternatives to making this design usable in landscape mode?

Or if you feel the best way to handle this is with CSS and/or JS, please feel free to discuss. One option is detecting if the viewport is less than a certain threshold then doing stuff to make the views scrollable. But I'd like to hear other thoughts, including if this type of design is not well suited for mobile browsers and should be revisited.

Attached are sample mocks similar to what we received.

UPDATE: I forgot to note that the designers don't want to provide responsive/tablet/desktop designs of this profile.

960Te.jpgVqxel.jpg

[Ronald Roe]

A couple of considerations about this design and how to go about it. First, always assume users are going to do it wrong at least some of the time. What I mean by that is, not everyone's photo is going to be portrait. So, really you're going to have to account for 2 scenarios. There's a few ways to go about this:

1: Crop. Not prime, but will work. Doesn't account for centering the right portion of the image unless you have an algorithm to do that.
2. Multiple photos. Have a primary photo. When that photo won't fill the screen, add another.
3. Gallery as secondary. This I think will work best. Imagine your example image in landscape. To the right, place a block of thumbnails or similar as a gallery.

[ajm]

Thanks for your feedback. We will have an algorithm that will do a number of things. We'll do some facial detection and position the head in a certain place, and in the case of landscape photos, we'll zoom in on those, cropping out the sides.

We do plan to have a gallery. For simplicity I didn't include that here. If you have any thoughts on how this design should look if a user turns his/her phone sideways, please let me know. I forgot to note that the designers don't want to provide responsive/tablet/desktop designs of this profile.

[Ronald Roe]

If you have algorithms to detect faces, then just crop it in landscape. Be sure to plan for the idiot user who doesn't upload a photo with a face in it, though.

And regarding your designers - However you need to get the message across, they need to do their job. If that means finding a way to make them, then do that. You can't properly do your job if they don't do theirs. I deal with this kind of thing all day, every day. Stand up and make sure people are aware of what you can't do your job without.