带有Google Apps脚本的JQuery Mobile
我已经使用HTMLService将Google Apps脚本部署为独立的Web应用程序，该应用程序提供了一个简单的前端，用于将预算数据输入到Google Spreadsheet中。 我为一些javascript使用JQuery Mobile，并将其设置为适合移动设备的方式，因为此应用程序的主要用例是从我的手机输入购买内容。
我的问题是，在移动浏览器上，应用程序无法正确缩放。 这是浏览器的宽度，但它就像是“缩小”一样。 所有控件在手机上基本无法使用。
如果脚本嵌入在Google网站中，则可以正确扩展，但我宁愿能够直接查看该Web应用程序，而不是将其嵌入到Google协作平台中。
编辑：我的代表足够高，现在发布照片，所以他们在这里（下面的代码）。
编辑：我的HTML的开始如下。 我原本在这里有JavaScript和完整的HTML，如果需要的话，我可以添加片段，但我再次检查它，并不认为它与问题混淆的问题相关，所以我删除了它。
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');
}
使用完整代码的代码段：
//<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>var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
这将有所帮助
您可以通过CSS Media Queries来确定显示器的大小。 例如，将此添加到您的CSS会导致窗体显示不同，具体取决于设备的屏幕大小：
@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;
}
}
使用Chrome的设备模拟，表单看起来相当不错。 （红色背景由上述css设置。）但是，当我从我的真实iPhone 6+访问应用程序时，并非所有元素放大均等。 （例如提交按钮。）因此，可能还需要其他特定的CSS来进一步调整结果。
我有这个确切的问题。 我所要做的就是测试某个网站的一些jQuery移动模板，而无需将它们部署到Google App Engine或Google Cloud Storage 。
Google云端硬盘不再允许您直接投放HTML ，因此应用脚本是下一个最佳选择。
问题是，应用程序脚本的iframe的一切，创造视口的问题，意味着要在移动上查看（即使解决了jQuery src=需要https而不是http ）。
解决方法是除了您提供的HTML之外，还在iframe页面上添加META标记。
无论如何，添加META标签的两个答案效果很好。
如果您正在为jQuery移动页面提供服务，则此code.gs代码适用于我：
function doGet() {
var output = HtmlService.createHtmlOutputFromFile('test');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return output;
}
test是你的test.html文件。