How to replicate scaling on desktop?

Question

I have some HTML pages that are typically served up to mobile devices (Android tablets) that use the tag to scale the content (typically 1280x720 images and videos).

Ideally, I need to view the same files (or at least the same content!) in a desktop browser, and have the content scale to fit the browser window.

E.g. the content, 1280x720, needs to scale up to fix the fullscreen size of Chrome on my monitor, 1960x1080.

Here is the code for displaying the content on the mobile device:

<html>
    <head>
        <meta name="viewport" content="initial-scale=1, width=1280, minimum-scale=1" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                margin: 0;
                padding: 0;
            }
            #master_container {
                height: 720px;
                overflow: hidden;
                position: relative;
                width: 1280px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="master_container"><!-- content is inserted here via jquery --></div>
        </div>
    </body>
</html>

So, this content would fill the screen on a Android TV box that has a resolution of 1080p, due to its browser still being classed as "mobile" (and the HTML file is displayed via a custom app using the WebView)

GibboK · Accepted Answer

Consider using CSS media queries.

Using CSS media queries you will be able to present content tailored to a specific range of output devices without having to change the content itself.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Here a quick example from the web (just re-size your browser window): http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/

Kagami Sascha Rosylight · Answer

I just built a library for this.

This library uses CSS zoom and transform properties to replicate IE11's viewport scaling implementation.

Here is how to use this:

<!-- CSS Device Adaptation -->
<style>
  @-ms-viewport { width: 1280px; height: 720px; }
</style>

<!-- Polyfill -->
<script src="fixedviewport.js"></script>
<script>
  FixedViewport.polyfill(1280, 720).onDOMContentLoaded();
</script>

@-ms-viewport is to do this work browser-natively, while unfortunately this is supported only by Internet Explorer 10+ and Presto-based old Opera browser.

Fortunately, FixedViewport.polyfill(1280, 720).onDOMContentLoaded(); will polyfill their behavior for you. You should have both, native CSS and this polyfill to your page work on all browsers.

How to replicate <viewport> scaling on desktop?

Tags:

html

jquery

android

css

Mr Pablo

2 Answers

GibboK

Kagami Sascha Rosylight

Recent Activity

Donate For Us