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

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 height 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. Also, the designers don't want to provide responsive/tablet designs of this profile. They just want it to be designed for portrait mode.

 

Have you heard about vh and vw in CSS? Simply adjust the image so the quality is not ruined for the landscape mode on the mobiles and add the scroll option. I doubt many people will use it in landscape as it's not a way to surf the web anyway.

 

Just make it so the app doesn't turn in landscape? Hence, it will always stay in portrait mode. Plenty of apps do this already. Instagram is one of them, for instance.

 

Short answer, there's no way to cleanly force a website to stay in portrait mode. Native apps can do this but not websites in a mobile browser. I glanced online about workarounds, and people talk about using certain frameworks or hacky CSS. But my initial reaction is that it will be very messy. People are saying these solutions are not good practice, that we shouldn't control a device's OS behavior. Plus our website is already built in Angular, and I don't think Angular has a solution for this. This social network feature we're making is going to be integrated into our site.