我的页面无法在 google 应用脚本中缩放。仅在移动设备上且不处于横向模式时

Question

我创建了一个带有表单的页面。当我在 chrome 中尝试时，缩放效果很好。在我创建 google 应用程序脚本页面后，当我尝试移动尺寸时缩放无法正常工作。当我将手机置于横向模式时它会起作用。在 Firefox 中有效。

我的第一页是用 materializecss 制作的。我第一次尝试所以我认为这有问题。我用 bootstrap 重新创建了页面，结果相同。我找不到问题所在。希望您能够帮助我。我使用电子表格中的数据创建 select。

<!DOCTYPE html>
<html lang="fr">

<head>
   <base target="_top">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="author" content="Armin Neumann">
    <link rel="icon" href="#">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <!-- <meta name="viewport" content="width=device-width, initial-scale=1,  minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"/>-->
    <!-- custom css -->
    <?!= include('stylesheet'); ?>
        <title>GoodId Intervention</title>
</head>

<body>

        <div class="container center">



        <div class="py-5 text-center">
                <img class="d-block mx-auto mb-4" src="http://www.goodid-fr.com/wp-content/uploads/2018/04/logo_goodid.jpg" alt="" max-height="100px" width="auto">
                <h2>Intervention</h2>

              </div>
<!-- Default form contact -->

<div class="row justify-content-center">
<form class="text-center border border-light col-md-6" id="form" onsubmit="handleFormSubmit(this)" name="form">

    <p class="h4 mb-4">Temps passé pour le client</p>

    <!-- Name -->
    <input type="date" id="date" name="date" class="form-control mb-4 col-sm-12"  required>



    <!-- Subject -->
    <label>Acteur</label>
    <select class=" custom-select mb-4 col-sm-12" id="acteur" name="acteur" required>
        <option value="" disabled selected>Sélectionner...</option>

    </select>

    <label>Client</label>
    <select class="custom-select mb-4 col-sm-12" id="client" name="client" required>
        <option value="" disabled selected>Sélectionner...</option>

    </select>
    <label>Contract</label>
    <select class=" custom-select mb-4 col-sm-12" id="contract" name="contract" required>
        <option value="" disabled selected>Sélectionner...</option>

    </select>


    <input type="number" name="time" id="time" class="form-control mb-4 col-sm-12" placeholder="Temps passeé(in min)" required>
    <!-- Message -->
    <div class="form-group">
        <textarea class="form-control rounded-0" id="notes" name="notes" rows="10" placeholder="Message"></textarea>
    </div>



    <!-- Send button -->
    <button class="btn btn-info btn-block" type="submit">Send</button>

</form>

</div>
<div class="row justify-content-center">
<button id="reset-button" class="btn btn-warning btn-lg " style="width:40%; margin-top:10px">Reset
    </button>
</div>
</div>
<!-- Default form contact -->


    <footer class="row justify-content-center">

        <div class="footer-copyright ">
            <div class=" container center">
                Made by
                <a class="orange-text text-lighten-3" href="http://www.goodid-fr.com/">GoodId </a> Version:
                <?!= version ?>
            </div>
        </div>
    </footer>
    <div class="modal loading">
        <!-- Place at bottom of page -->
    </div>
    <!-- Compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>


       var acteurs = <?!= acteurs ?> ;
       var clients = <?!= clients ?> ;


        /*
        function to get contracts
        */

        document.getElementById("client").addEventListener("change", function () {
            let val = document.getElementById("client").value;
            console.log("val :"+val);
              var body = document.querySelector('body');
            body.classList.add("load");
            if (val != "") {
                google.script.run.withSuccessHandler(setContracts).getContracts(val);
            }
        });


        document.addEventListener('DOMContentLoaded', function () {
             var selActeur = document.getElementById("acteur");
             var selClients = document.getElementById("client");
             var optActeur;
             var optClients;
             var resetBtn = document.getElementById("reset-button");
             // NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
             // Il faut fournir une valeur de type function (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
             resetBtn.onclick = reset;



            for (x in acteurs) {
                  optActeur = document.createElement('option');
                  optActeur.appendChild( document.createTextNode(acteurs[x]) );
                  // set value property of opt
                 optActeur.value = acteurs[x]; 
                // add opt to end of select box (sel)
                selActeur.appendChild(optActeur); 
            }

            for (c in clients) {
                optClients = document.createElement('option');
                optClients.appendChild( document.createTextNode(clients[c]) );
                // set value property of opt
                optClients.value = clients[c]; 
                // add opt to end of select box (sel)
                selClients.appendChild(optClients); 
            }

           // var elems = document.querySelectorAll('select');
            var elema = document.getElementById("acteur");
            var elemc = document.getElementById("client");
            var elemco = document.getElementById("contract");


            //var instances = M.FormSelect.init(elems);
            var elemt = document.querySelectorAll('.datepicker');


        });

        /**
         * function to set acteurs
         * 
         * @param {string or json} titles 
         * return html select for titles
         */
        function setContracts(contracts) {
            var elems = document.getElementById("contract");
            removeAllOptions(elems, false);
             var optContract;
             console.log(contracts);
            for (v in contracts) {
                optContract = document.createElement('option');
                optContract.appendChild( document.createTextNode(contracts[v]) );
                // set value property of opt
                optContract.value = contracts[v]; 
                // add opt to end of select box (sel)
                elems.appendChild(optContract); 
            }
             var body = document.querySelector('body');
            body.classList.remove("load");
        }




        function reset(){

               document.getElementById("form").reset();
               var body = document.querySelector('body');
               var elems = document.getElementById("contract");
         var optContract;
            var elems = document.getElementById("contract");
           removeAllOptions(elems, false);
                optContract = document.createElement('option');
                optContract.appendChild( document.createTextNode('Sélectionner...') );
                // set value property of opt
                optContract.value = ""; 
                // add opt to end of select box (sel)
                elems.appendChild(optContract); 
                elems.options[0].disabled = true;
                elems.options[0].selected = true;
               body.classList.remove("load");
        }

        function formulaireEnvoye() {
            var body = document.querySelector('body');
             var elems = document.getElementById("contract");
             var optContract;
           reset();
           removeAllOptions(elems, false);
            optContract = document.createElement('option');
                optContract.appendChild( document.createTextNode('Sélectionner...') );
                // set value property of opt
                optContract.value = ''; 
                // add opt to end of select box (sel)
                elems.appendChild(optContract); 
                elems.options[0].disabled = true;
                elems.options[0].selected = true;
             body.classList.remove("load");
        }

        function handleFormSubmit(formObject) {
            var body = document.querySelector('body');
            body.classList.add("load");
            event.preventDefault();
            google.script.run.withSuccessHandler(formulaireEnvoye).processForm(formObject);
        }


        function removeAllOptions(sel, removeGrp) {
        var len, groups, par;
        if (removeGrp) {
        groups = sel.getElementsByTagName('optgroup');
        len = groups.length;
        for (var i=len; i; i--) {
            sel.removeChild( groups[i-1] );
        }

    }

    len = sel.options.length;
    for (var i=len; i; i--) {
        par = sel.options[i-1].parentNode;
        par.removeChild( sel.options[i-1] );
    }
}
    </script>

</body>

</html>

function doGet(e) {
     if (e.parameter.page == 'test') {
        template = HtmlService.createTemplateFromFile('test');
        }else{
    var template = HtmlService.createTemplateFromFile('index');
}
    template.version = version;
    template.acteurs = getActeurs();
    template.clients = getClients();

    return template
        .evaluate()
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

<style>

.loading {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8) url('https://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.load .loading {
    overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.load .loading {
    display: block;
}
</style>

预期结果是页面适合移动屏幕。没有错误消息

Answer 1

您应该将 viewport 元标记添加到您的 HtmlOutput 以便在移动屏幕上正确呈现。

template = HtmlService.createTemplateFromFile('test');
template.addMetaTag('viewport', 'width=device-width, initial-scale=1');

Answer 2

请尝试下面的代码

function doGet(request) {
     var template = HtmlService.createTemplateFromFile('Index'); 
     var html = template.evaluate()
         .setTitle('Title');
     
     var htmlOutput = HtmlService.createHtmlOutput(html);   
     htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');   
     
     return htmlOutput
     }

我的页面无法在 google 应用脚本中缩放。仅在移动设备上且不处于横向模式时

My page doesn't scale in google app script. only on mobile and when not in landscape mode

google-apps-script

web-applications

bootstrap-4

viewport

meta-tags