Is there a way to preview a specific div and see how it appears on mobile devices? The HTML code for the div is obtained from an external source, like this:
var external_html='<div>Responsive div</div>' +
'<style>@media screen(max-width:360) {{color:blue}}</style>')
var element=$(external_html)
.appendTo(document.body)
Even after using $(element).width(300), I still see the desktop version. Is there a way to view how it looks on different devices?
In simpler terms: How can I simulate CSS media queries for a single element within the document?
Just to note: I am aware of using IFrames for this purpose, but would prefer to avoid them.
HTML Version of the question:
<div style=width:250px>
It will be black
</div>
<div style=width:190px>
Ideally, I want it to appear in blue. However, it remains black
</div>
<style>
div.preview (max-width:200px){
// This style should only apply to the second div
color:blue
}
</style>
Reasoning behind this: With Angular, I'm developing a WYSIWYG directive that requires support for responsive layouts. I aim to allow end-users to visualize real-time mobile views. How can I achieve this emulation of mobile devices within the directive? Thank you