I am working on creating a website builder, and I want to be able to see what the page would look like on a phone, without having to always open the web inspector and changing the width of it. I looked it up, and I couldn't find anything that worked. I want to be able to switch from desktop to tablet to phone size screens in a div (not the whole screen). I would appreciate any advice (ideas) you may have.

I am working on creating a website builder, and I want to be able to see what the page would look like on a phone, without having to always open the web inspector and changing the width of it. I looked it up, and I couldn't find anything that worked. I want to be able to switch from desktop to tablet to phone size screens in a div (not the whole screen). I would appreciate any advice (ideas) you may have.

• javascript
• html
• css
• reactjs
• tailwind-css

2 Answers 2

There are a few things you can try depending on what you want to do. Id suggest either setting the dementions of your html:

html { width: 500px; height: 500px;}

Or putting the webpage in an iframe with a certain size. you can set the dementions of the iframe like this:

<iframe src="/yourWebPage" width="500" height="500"></iframe>

Simply Create A Page that contains a dropdown with different set of screen sizes and An Iframe. Assuming you have a set of screen sizes on your dropdown list, on selection change of your dropdown use those width and height values in your iframe tag.