phpファイル内でjavascriptを動かしたいです

初心者なので申し上げ御座いませんが、教えてください。
phpファイルの中で、javascriptを動かしたいのですが、いまいち仕組みが分かりません。
WEBサイトで、書いてある通り（？）試しましたがうまくいきません。
【環境】
OS　windows10
サーバー　xampp

「やろうとしてること」
javascriptで画面の大きさを図り、その大きさからサイズを変更してcssでボックスを描くことです。
HTML/CSSとJavaScriptのみでプログラムは正常に機能するのですが、ゆくゆくは、PHPファイルを組み込みたいのです。
冒頭でも書きませたが、私の認識不足による、不手際かもしれませんので、詳しく教えて貰えませんか？
＊試したこと
echo <<<EOM EOM;で囲む。?> <?phpで囲む。「print "<script language=javascript>hoge()</script>";」は、この行しかサンプルしていなくて、解読が出来ませんでした。
【お願い】
何度か、質問させていただいているのですが、答えだけの返答では、理解に苦しむので、初心者にもわかる解説などの返答をお願いします。
わがままを描てしまい申し上げ御座いません。

【***.php】ファイル
<?php
  $test = "TEST/php";
 ?>
<!-- <!DOCTYPE html> ここの部分は書いても書かなくても変わらなかった。どっちが正しいか分かりません。-->
<html lang="ja">
<head><meta charset="utf-8">
  <title></title>
  
  <style type="text/css">
    :root{
      --main-width:10px;
      --main-heinght:10px;
      --main-top-width:10px;
      --main-top-heinght:10px;
    }
    #taitl{
      width:var(--main-top-width);
      height:var(--main-top-heinght);
      background-color: #ff3300;
    }
  </style>
  
  <script type="text/javascript">
    var pw = window.innerWidth,var ph = window.innerHeight;
    var pw0=pw-100,ph0=ph-100;
    document.documentElement.style.setProperty('--main-top-width',pw0+'px');
    document.documentElement.style.setProperty('--main-top-heinght',ph0+'px');

  </script>

</head>
<body>
  <div id="taitl"><h1>TEST</h1><?php echo $test;?></div>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

php
1<?php
2  $test = "TEST/php";
3 ?>
4<!DOCTYPE html>
5<html lang="ja">
6<head>
7  <meta charset="utf-8">
8  <title></title>
9</head>
10<body>
11  <div id="taitl">
12    <h1>TEST</h1>
13    <?php echo $test;?>
14  </div>
15
16  <script type="text/javascript">
17    var pw = window.innerWidth;
18    var ph = window.innerHeight;
19    var pw0 = pw - 100;
20    var ph0 = ph - 100;
21    document.documentElement.style.setProperty('--main-top-width', pw0 + 'px');
22    document.documentElement.style.setProperty('--main-top-heinght', ph0 + 'px');
23  </script>
24</body>
25</html>