If I understand well you are wanting to hide the code generated by the script until it is resized, it is not displayed nor in the source code, would it? or is the php code being displayed even with the css for it to be hidden?
type if it is not to display it in the source code until the moment it is resized you will have to make a request to the server again request the page snippet using ajax or even iframe, let's see a simpler example, div where you do not have anything written when you press the button it pulls this information from the server and mounts without leaving the page itself
html code
<html>
<script>
function kodo_puxar(){
//aqui ele pega o div pelo id
var meudiv = document.getElementById("kami");
//instanciamos o objeto
var meureq = new XMLHttpRequest();
//especificamos a url e o metodo
meureq.open("get","http://192.168.1.1/kodo/puxar.php",false);
//fazemos a requisição
meureq.send();
//jogamos a resposta no div
meudiv.innerHTML = meureq.responseText;
}
</script>
<body>
<h1>exemplo stackoverflow by kodo</h1><hr>
<div id="kami">
</div>
<input type="button" value="puxar" onclick="kodo_puxar()">
</body>
</html>
no php code people generate or html
<?php
echo '<font color="red">testando</font>';
?>
If we look at the page (source code) the php code has not been generated yet
Butwhenwepressthebuttontherequestismadeontheserver,thenewcodeispulled
You can for example pass the dimension of the page as an argument and create the html code again based on it only if it is in the desired size, you can use events to know when it was resized or in gambiarra using setInterval, as it is also possible to do This is done directly in the javascript (but in this case the client will have access to the data of the source code)