我的页面无法在Google App脚本中缩放.仅在移动设备上且不在横向模式下 [英] My page doesn't scale in google app script. only on mobile and when not in landscape mode
本文介绍了我的页面无法在Google App脚本中缩放.仅在移动设备上且不在横向模式下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用表格创建了一个页面.当我在chrome中尝试时，缩放效果很好.创建Google应用程序脚本页面后，尝试移动尺寸时缩放无法正常工作.当我将手机置于横向模式时，它可以工作.在Firefox中有效.
I created a page with a form. When I tried it in chrome the scaling in works just fine. After I created a google app script page the scaling is not working properly when I try mobile size. it works when I put the mobile in landscape mode. In Firefox it works.
我的第一页是用materializecss制作的.第一次尝试，所以我认为这是有问题的.我用引导程序重新创建了页面，结果相同.我找不到问题.希望您能够帮助我.我使用电子表格中的数据创建选择.
My first page was made with materializecss. First time I tried so I thought there was a problem with that. I recreated the page with bootstrap, same result. I can't find the problem. Hope you can help me. I create the select with data from a spreadsheet.
<!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>
预期结果是页面适合在移动屏幕上显示.没有错误消息
The expected result is the page fit on a mobile screen. No errors messages
推荐答案
You should add the viewport meta tag to your HtmlOutput for rendering properly on mobile screens.
template = HtmlService.createTemplateFromFile('test');
template.addMetaTag('viewport', 'width=device-width, initial-scale=1');
这篇关于我的页面无法在Google App脚本中缩放.仅在移动设备上且不在横向模式下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
