javascript - script - jquery cdn google
JQuery Mobile con Google Apps Script (4)
He creado un Google Apps Script implementado como una aplicación web independiente utilizando HTMLService que proporciona una interfaz simple para ingresar datos de presupuesto en una hoja de cálculo de Google. Estoy usando JQuery Mobile para algunos de los javascript, así como para darle un estilo amigable para dispositivos móviles, ya que mi principal caso de uso para esta aplicación es ingresar compras desde mi móvil.
Mi problema es que en un navegador móvil, la aplicación no escala correctamente. Es el ancho del navegador, pero es como si estuviera "alejándose". Todos los controles se vuelven esencialmente inutilizables en el móvil.
Si el script está incrustado en un sitio de Google, se escala correctamente, pero prefiero poder ver la aplicación web directamente, en lugar de incrustarla en Google Sites.
EDITAR: Mi representante es lo suficientemente alto como para publicar fotos ahora, así que aquí están (debajo del código).
EDITAR: El comienzo de mi HTML está debajo. Originalmente tenía el JavaScript y el HTML completo aquí, y puedo agregar fragmentos si es necesario, pero lo revisé nuevamente y no creo que sea relevante para el problema que estaba abarrotando la pregunta, así que lo eliminé.
HTML:
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<?!= include(''javascript''); ?>
<div data-role="page" data-theme="a" id="main">
<div data-role="content">
<form id="myForm">
...
Code.gs:
function doGet() {
return HtmlService.createTemplateFromFile(''index'').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle(''Budget Entry'');
}
Fragmento con código completo:
//<script>
function formSuccess() {
var dateSelect = document.getElementById("date");
var dateSelected = dateSelect.options[dateSelect.selectedIndex].text;
var catSelect = document.getElementById("category");
var catSelected = catSelect.options[catSelect.selectedIndex].text;
var amountEntered = document.getElementById("amount").value;
var noteEntered = document.getElementById("note").value;
var successMsg = ''Date: '' + dateSelected +
''<br>Category: '' + catSelected +
''<br>Amount: $'' + amountEntered +
''<br>Note: '' + noteEntered;
$(''#dialogMain'').html(successMsg);
$.mobile.silentScroll(0);
$.mobile.changePage( "#dialog", { role: "dialog" } );
requestCategoryInfo(document.getElementById("status"));
document.getElementById("amount").value = '''';
document.getElementById("note").value = '''';
}
function submitForm() {
if (document.getElementById(''amount'').value.length == 0) {
alert(''Please enter an amount.'');
return;
}
$.mobile.loading( ''show'' );
$(''#status'').html('''');
google.script.run
.withSuccessHandler(formSuccess)
.processForm(document.getElementById(''myForm''));
}
function loadUI() {
$.mobile.loading( ''show'' );
loadDateSelect();
google.script.run.withSuccessHandler(loadCategoryNamesAndValues).withFailureHandler(sendLog)
.getCategoryNamesAndValues();
$.mobile.loading( ''hide'' );
}
function loadDateSelect(){
var d = new Date();
var month = d.getMonth()+1;
var today = d.getDate();
var daysInAMonth = [0,31,28,31,30,31,30,31,31,30,31,30,31];
for (var n=1; n <= daysInAMonth[month]; n++) {
var option = $("<option>").attr(''value'',n).text(month+"/"+n);
$(''#date'').append(option);
}
$(''#date'').val(today);
$(''#date'').selectmenu(''refresh'', true);
}
function loadCategoryNamesAndValues(catNamesAndValues){
var namesAndValues = catNamesAndValues;
var optionHTML = '''';
var currentGroup = '''';
var catName = '''';
var catID = '''';
for (var i=0; i<namesAndValues.length; i++) {
catName = namesAndValues[i][0];
catID = namesAndValues[i][1];
if (catID.toString() == "Group"){ // Handle Group Name
if (currentGroup.length > 0) { // close previous optgroup tag
optionHTML += "</optGroup>";
}
// Open optGroup
currentGroup = catName;
optionHTML += "<optGroup label=''" + currentGroup + "''>";
} else if (isNaN(parseInt(catID)) || parseInt(catID) == 0){ //Do Nothing
} else { // Create Option HTML as: <option value=namesAndValues[i][1]>namesAndValues[i][0]</option>
optionHTML += "<option value=''" + catID + "''>" + catName + "</option>";
}
}
// Close current OptGroup
optionHTML += "</optGroup>"
document.getElementById(''category'').innerHTML = optionHTML;
$(''#category'').selectmenu(''refresh'', true);
}
function categoryChanged() {
setStatus('''');
requestCategoryInfo(document.getElementById(''status''));
}
function requestCategoryInfo(container) {
$.mobile.loading( ''show'' );
google.script.run
.withSuccessHandler(displayCategoryInfo)
.withFailureHandler(sendLog)
.withUserObject(container)
.getCategoryInfo(document.getElementById(''category'').value);
}
function displayCategoryInfo(categoryInfo, container){
var spentStr = ''Spent $'' + categoryInfo.actual.toFixed(2) + '' of $'' + categoryInfo.budgeted.toFixed(2);
var remainingStr = ''Remaining: $'' + categoryInfo.remaining.toFixed(2);
var statusDiv = container;
if (statusDiv.innerHTML.length > 0){ statusDiv.innerHTML += ''<br>''};
statusDiv.innerHTML += spentStr + ''<br>'' + remainingStr;
if (String(categoryInfo.fundAmount).length > 0) {
var fundAmountStr = '''';
if (categoryInfo.remaining < 0) {
fundAmountStr = (categoryInfo.fundAmount + categoryInfo.remaining).toFixed(2);
} else {
fundAmountStr = categoryInfo.fundAmount.toFixed(2);
}
statusDiv.innerHTML += ''<br>Fund: $'' + fundAmountStr;
}
$.mobile.loading( ''hide'' );
}
function setStatus(html){
document.getElementById(''status'').innerHTML = html;
}
function appendStatus(html){
setStatus(document.getElementById(''status'').innerHTML + ''<br>'' + html);
}
function sendLog(){
google.script.run.sendLog();
}
//</script>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<?!= include(''javascript''); ?>
<div data-role="page" data-theme="a" id="main">
<div data-role="content">
<form id="myForm">
<div>Date</div>
<div><select name="date" id="date"></select></div>
<div>Category</div>
<div><select name=category id="category" onchange="categoryChanged()" required></select></div>
<div>Amount</div>
<div><input type="text" name="amount" id="amount" required></div>
<div>Note</div>
<div><input type="text" name="note" id="note"></div>
<div><input type="button" id="submit" value="Submit" onclick="submitForm()"/></div>
</form>
<!--<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">Dialog</a>-->
</div><!-- /content -->
<div data-role="footer">
<div id="status"></div>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="dialog" data-close-btn="none">
<div data-role="header">
<h1 id="dialogHeading">Success!</h1>
</div>
<div data-role="main" class="ui-content" id="dialogMain">
<p>Text goes here.</p>
</div>
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"><a href="#main" data-role="button" data-icon="check">OK</a></div>
<div class="ui-block-c"></div>
</div><!-- /grid-a -->
<!--><div data-role="footer"></div>-->
</div>
<script type="text/javascript">
$(loadUI);
</script>
Puede determinar el tamaño de la pantalla a través de consultas de medios CSS. Por ejemplo, agregar esto a su CSS hace que el formulario se muestre de manera diferente según el tamaño de pantalla del dispositivo:
@media only screen and (min-device-width: 413px) and (max-device-width: 415px) { /* iPhone 6+ */
#main, #dialog {
zoom: 3;
background: red;
}
}
@media only screen and (min-device-width: 374px) and (max-device-width: 376px) { /* iPhone6 Styles */
#main, #dialog {
transform: scale(2);
background: blue;
}
}
@media only screen and (min-device-width: 359px) and (max-device-width: 361px) { /* iPhone6+ Alt Styles */
#main, #dialog {
transform: scale(2);
background: green;
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) { /* iPhone5 or less Styles */
#main, #dialog {
transform: scale(2);
background: grey;
}
}
Al usar la emulación de dispositivos de Chrome, el formulario se veía bastante bien. (El fondo rojo está configurado por el css anterior). Pero cuando accedí a la aplicación desde mi iPhone 6+ real, no todos los elementos se ampliaron por igual. (Botón de enviar, por ejemplo). Por lo tanto, es probable que se necesite algún otro CSS específico para personalizar el resultado.
Esto debería ayudar a addmetatagname () de Class HtmlOutput . Debe modificar la metaetiqueta a través del código.
var output = HtmlService.createHtmlOutput(''<b>Hello, world!</b>'');
output.addMetaTag(''viewport'', ''width=device-width, initial-scale=1'');
esto ayudará
Yo tuve el mismo problema. Todo lo que intentaba hacer era probar algunas plantillas móviles de jQuery para un sitio web sin implementarlas en Google App Engine o Google Cloud Storage .
Google Drive ya no le permite servir HTML directamente, por lo que el script de la aplicación es la siguiente mejor opción.
El problema es que las secuencias de comandos de la aplicación incluyen todo, creando problemas de visualización para cosas que deben verse en dispositivos móviles (incluso después de solucionar el problema donde jQuery src= debe ser https lugar de http ).
La solución es tener una etiqueta META en la página iframe además del HTML que está publicando.
De todos modos, las dos respuestas que dicen que para agregar una etiqueta META funcionaron muy bien.
Si está sirviendo una página móvil jQuery, este código code.gs trabajó para mí:
function doGet() {
var output = HtmlService.createHtmlOutputFromFile(''test'');
output.addMetaTag(''viewport'', ''width=device-width, initial-scale=1'');
return output;
}
Donde la test es su archivo test.html .