Scaling Mobile Responsive Landscape Layout for Portrait Display

0
votes

I have a responsive web page layout designed for Mobile landscape display (480px) in mind and want to use that same mobile landscape layout for mobile Portrait display at (320px). Can anyone think of a way to scale down this view so that it display also for (320px) without adding another css media query specifically for 320px display?

2
javascriptcsshtmlmobileresponsive-design
I've manually scaled this down with @media-queries but will still like to know if there is any other method to scale this down using Javascript. I only know of how to use 320px display for 480px but not the reverse. – Patrick Ejelle-Ndille

2 Answers

0
votes

Set all sizes in rems and jack up font size to 150% in landscape mode? As long as you don't use pixels, everything will scale up

http://snook.ca/archives/html_and_css/font-size-with-rem

0
votes

To display mobile landscape layout same in the mobile portrait layout you have to use below media query only. So, when you rotate your mobile from landscape to portrait or vice versa, the same layout will display.

    @media screen and (max-width: 480px)