iphone initial portrait orientation load is giving element width of landscape view

Question

I have a div set to width: 100% . When I load it initially in the portrait view of the iphone the element width is picking up at 480px .

The odd thing about this is that when I console log the width at load I am getting 320px . Also, if I manually change the orientation to landscape and then back to portrait then the element is getting the correct sizing.

I have tried a handful of suggestions to the meta viewport tag, but nothing seems to be working. Here is the current tag info:

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1, minimal-ui">

Also, when I change the zoom after initial load, then the element gets the correct sizing.

Any suggestions on how I can get the right size at initial load?

Answer 1

I was going to delete this post, but since someone upvoted it I figured I would provide the answer. The issue was that this element had position: fixed . I simply added position: absolute for the media query on mobile and it is now functioning properly. :)