My goal is to embed two versions of the same site (mobile and tablet) on the same page. Originally, this was done within an iFrame but I started working with a CMS no longer handles exporting to iFrames well.
I've looked into Java Script solutions such Element Queries, but those solutions seem tied to specific elements (i.e. header[min-width~="500px"]
)
I'm looking for a solution that will fire a series of @media screen and (min-width: XXXpx)
with respect to the container I'm embedding the site in.
I've also tried a solution loading the site into a div with jQuery - but the embedded site's 'width' is still relative to the browser and not the container.
Much thanks to any guidance.