Google Script Web App按用户设备加载不同CSS的问题求助

问题说明 #

• 需求：Google Script/Web App项目中根据用户设备加载不同CSS文件，非响应式设计，有特定业务要求。
• 已创建文件：Index.html、css1.html、css2.html
• 部署测试后报错：ReferenceError: navigator is not defined（对应Index.html第5行代码）

现有代码 #

Index.html（核心代码） #

<!DOCTYPE html>    
<html>      
  <head>        
    <base target="_top">        
    <? if (/Mobi/.test(navigator.userAgent)) {?>
        <?!= HtmlService.createHtmlOutputFromFile('css1').getContent(); ?>
      <?} else {?>
        <?!= HtmlService.createHtmlOutputFromFile('css2').getContent(); ?>
      <?}?>
  </head>      
  <body>         
    <p> THIS is a TEST </p>      
  </body>    
</html>

code.gs #

function doGet(e) {    
    var html      = HtmlService.createTemplateFromFile('Index');    
    var pageData  = html.evaluate()                    
                    .setTitle('Web App 1')                        
                    .setFaviconUrl('https://www.gstatic.com/images/icons/material/product/2x/apps_script_64dp.png')                    
                    .setSandboxMode(HtmlService.SandboxMode.IFRAME)                             
                    .addMetaTag('viewport', 'width=device-width, initial-scale=1')              
                    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)               
    return pageData;
}
function include(filename){  
  return HtmlService.createHtmlOutputFromFile(filename)        
        .getContent();
};

css1.html（移动端CSS） #

<style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
p {  
  color: blue;
}
</style>

css2.html（桌面端CSS） #

<style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
p {  
  color: red;
}
</style>

无效尝试方案 #

• 使用@media媒体查询加载CSS，代码如下，但未生效：

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 380px)' href="css1"/>
<link rel="stylesheet" media='screen and (min-width: 381px) and (max-width: 700px)' href="css2"/>

• 当前可通过加载不同页面实现设备适配，但更希望仅切换CSS文件。

内容的提问来源于stack exchange，提问作者SystemWorks