0

Let's say I have a page with 2 divs. Each div contains the same data, say content x.

content x is responsive, with media query and viewport.

Div1 is as big as the page width: 100%

Div2 has width: 320px;

What I want to achieve is that when I am on desktop, I like div2 to show the contents as if it was a mobile phone (simulate the mobile phone viewport) and div1 stay the same (desktop version).

Is this possible, without modifying CSS of content x ?

The reason I want to do this is because content x has a lot of stuff and would take time to add css.

When I set 'div2 width: 320px,content x` is not rearranged properly (as it would on a mobile screen).

Lemures
  • 474
  • 5
  • 11
  • 2
    Your best bet may be iframes -- To my knowledge, media queries and other determinations for mobile responsive work off of the window's dimensions, not the DIV's (although there is rumor of something like that down the road in CSS -- just not here today) – Doug Apr 11 '18 at 13:14
  • Your really best bet is to use the tools browsers have already build-in these days for such purposes. Trying to emulate it inside a “bigger” page is bound to fail in one regard or the other, sooner or later. (For example device-width based queries would probably fail immediately, if you just used a div to “simulate” a small viewport.) – CBroe Apr 11 '18 at 13:38
  • 1
    I think iframe is the only solution to this. – Lemures Apr 11 '18 at 13:39
  • iframe or object will work – Jonny Apr 11 '18 at 13:44

0 Answers0