Keeping pixel ratio but scaling size

Question

So I have this emulator that's created using asp.net. The emulator uses and iframe at the size of the device.

However, on ipad the device size is way to big for the screen and I need to scale it.

Does anyone know how I can go abouts scaling this iPad but keeping the pixel ratio of an ipad? Or if this is even at all possible?

Any help would be greatly appreciated.

Thanks.

This post may help you: http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe — emmanuel, Sep 23 '14 at 11:42

score 1 · Accepted Answer · answered Sep 23 '14 at 13:20

1

Maybe this will work for you. I had same issue before and this worked.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

answered Sep 23 '14 at 13:20

Regardt Ogies Myburgh

160
1
1
8

This is brilliant – Ruslan Mar 24 '20 at 20:57

score 0 · Answer 2 · answered Sep 23 '14 at 11:44

You can use a padding-bottom trick to ensure any elements retain their ratio at variable widths.

iframe {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

iframe .child {
    width: 100%;
    height: 100%;
    position: absolute;
}

The 56.25% ensures the iframe will retain a 16:9 ratio, calculated by doing 9 / 16 * 100

Now you can change the iframe's width to whatever is appropriate for your layout.

Keeping pixel ratio but scaling size

2 Answers2