I am stuck on this issue in my project. We are developing a website which is to be viewed on 2 different screens one is a landscape device (32 inch height & 10801920px) and other is portrait device (55 inch height and 19201080). I have used bootstrap to create the responsive design. I have to create a reduced height button functionality on the portrait device that will basically change look of the website from portrait to landscape, scale down the website and send it to bottom, so it can be accessible to wheelchair bound and less height people.

Here are the approaches that I have tried till now:

Approach 1:

I have implemented this functionality by adding meta tag and adding a picture on top when this is clicked.

<meta name="viewport" content="width=1920">

Issue - This was done with the assumption that portrait screen will be a mobile device so viewport can work. To my surprise, it is not android device but rather has windows 10 os and is a desktop device in portrait mode, thus rendering my approach moot as desktop browser do not support viewport. I have tried several things but I am unable to change from portrait to landscape as for landscape the document width has to 1920px so bootstrap can do the magic. I have tried initial scale in viewport but that also does not work.

Approach 2: My second approach is to use an iframe of the website having a width 1920px on the reduced height click to be shown. Here is the code flowchart of this approach:

<div> //visible only when reduced height button is clicked
 <img> //image appearing on top
 <iframe src="url">
</div>

<div> //entire website's code hidden when reduced height button is clicked
....
</div>

Issue - This works fine to some extent, but in this approach several 3rd party things break, which are on about 1/3rd of all pages, this can probably be corrected but is a mammoth task.

Restrictions - I can not change the os of the portrait kiosk, can not change the browser in which site is viewed (Chrome) as some batch script is written to only operate in fullscreen and disable any other sites to open on n/w level which is browser specific for some reason. I also can not install chrome android on any android emulator and run site on that as that will effect the user experience drastically.

Please provide any ideas and correct me if I am doing something wrong, all help is much appreciated. Thanks.