adding media queries from js

Question

I have a page where I open a new window like so

var myWindow = window.open("", "", "width=755.9100,height=347.7200");
myWindow.document.body.append(img);

I want to add styles some style to this new window from the previous window

@page {size: A4;margin: 0;@media print {html, body {width: 210mm;height: 297mm;}

How do I add this to head tag in html through js?

Answer 1

There is the window.matchMedia function in js:

The usage is quite simple:

if (window.matchMedia("(min-width: 400px)").matches) {
    /* the viewport is at least 400 pixels wide */
} else {
    /* the viewport is less than 400 pixels wide */
}

One more useful article is here.

Answer 2

style is also an HTML element, so you can append that in a similar manner as you are appending the img element

var myWindow = window.open("", "", "width=755.9100,height=347.7200");
myWindow.document.body.append(img);
var style = myWindow.document.createElement("style")
style.innerHTML = "@page {size: A4;margin: 0;@media print {html, body {width: 210mm;height: 297mm;}"
myWindow.document.head.append(style);