Issue
I'm currently working on a web based html editor and wanting to have a div wrapper act as a viewport for different screen sizes and devices. Is there a way to have media queries recognize a div as a viewport size? I know I can load an iframe into the div at 100% width and height and the display works as expected, but I was wanting it be just the div so that it would be easier to add rows, columns, etc.
Here is an example of how the div is setup now:
<div id="page-view" class="mobile">
<div id="device-width" style="width: 430px; height: 932px;"></div>
</div>
I would like to be able to load in editable html inside the device-width div and it would respond like it would on a device at that size.
Solution
There isn't really a way to make the browser recognize a div as a view port necessarily... But you are in luck as there is something similar to media queries that will work with the size of the div element. Its this semi-new feature called Container Queries.
With container queries you can make media queries that are relative to the container instead of the screen size... By doing such you emulate this idea of a viewport that you have going... You can read up about them here.
As well you can do a quick google or YouTube search to learn more about them as well.. They are quite supported going into 2024 according to CanIUse. With just over 90% support (as of writing this), we can start using them in production environments fairly safely.
Answered By - Sharp Dev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.