div scaling on iPhone?

Question

iPhone

Condition: if window.width is less than the width of the div (610px), then apply the zoom css property to it. This condition works fine on all desktop browsers, as well as on WP and Android, but behaves completely incorrectly on the iPhone.

On the iPhone, either immediately 100% if the number is without a "margin": jsfiddle.net/hcoqfnr3/6/
Or scaling occurs and cannot be increased to 100%: jsfiddle.net/hcoqfnr3/7/
(tap / click on the rectangle scales it)

I I chose zoom because scale was more clumsy and scaled from the center of itself, and zoom from the top left. I also experimented with flexbox, which behaved incorrectly on Lumia. And I need to please all three platforms.

What to do? Maybe it's worth measuring not window.width?
Is there a more elegant and multi-platform solution?

Answer 1

Opt out of zoom. Pay attention to transform and transform-origin.