How to display the css mobile view resolution of a react.js component on a full screen desktop view without actually minimizing the browser window?
Question
I have 3 different react.js projects integrated into one project. I should display project one on the left side of the screen, project two to the right and project three at the bottom of both. But the web view content of project one is very big in height and width and will get overlapped because of it's design if I try to change its width and make it float left. I'm not supposed to change the actual code of project one. Luckily, I have a mobile screen view of the project one written using css media queries and it looks scaled down in size which is perfect for me to use it.
I need to figure out a way to display the project one mobile resolution breakpoint code I have on the left side of the screen, say width:45% float:left. Somehow make the component/project one to fit into a window(which is positioned on the left of screen like I need) with size of mobile breakpoint or less, so the component inside that window thinks that "the browser window is small and I have to display the mobile view of me" , if it makes sense. I tried modifying the head tag of project one - tried changing initial-scale and width of viewport meta tag in the head tag . Nothing seems to work. Not sure if I put it the right way, but if someone could make sense out of it and help, I would highly appreciate it.
1 answers
solution1
0 2019-11-26 08:11:55
You can use iframe to position your project in whatever layout you want. You can fix heigth and width of iframes .
.iframes { display: flex; justify-content: space-between; align-items: center; } .bottom-iframe { width: 100%; margin: 0 auto; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="iframes"> <iframe width="300" height="300"></iframe> <iframe width="300" height="300"></iframe> </div> <div class="bottom-iframe"> <iframe width="300" height="300"></iframe> </div> <script src="script.js"> </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.