How to make pop-up window fit horizontal and vertical screen in different mobile devices

Customization
1

Pop-up JS code:

var image=
    '<div>' +
    '  <span style="font-size: 1.5em">title</span>' +
    '  <hr/>' +
    '  <p style="margin: 0 0 5px 0; padding: 0">image</p> ' +
    '  <img src="https://" style="width: calc(100vw - 112px); height: calc(50vh - 112px）">' +
    '</div>';

I tested the following code in different devices. How to make pop-up window fit horizontal and vertical screen in different mobile devices as iPad and iPhone with one version code.
And I tested

'<img style="@media screen and (orientation: portrait) {   }    @media screen and (orientation: landscape) {   }">'

in javascript code.Seems doesn’t work.

2

Hey,

I believe using vw and vh values (viewport width and viewport height) is the right approach.

However it seems to be a more general UI / Frontend issue that falls outside of the scope of shapespark support. I think there are multiple ways to approach this problem. Maybe some of related topics on stack overflow could provide some answers?

Also, about your test: I am not sure if you can use media queries inside style tag (style="@media…)

I have moved this topic to #customization