I made Google Apps Script deployed as a stand-alone web application using HTMLService, which provides a simple interface for entering budget data into a Google spreadsheet. I use jQuery Mobile for some of javascript, and also to style it for mobile devices, since my main use case for this application is to enter purchases from my mobile phone.
My problem is that the application does not scale properly in the mobile browser. This is the width of the browser, but it is as if "reduced". All controls become unusable on mobile devices.
If Script is embedded in the Google Site, it scales properly, but I would rather directly browse the web application rather than embed it in Google Sites.
EDIT: My reputation is high enough to post photos now, so here they are (below code).
EDIT: The beginning of my HTML is below. I originally had javascript and full HTML, and I can add snippets if necessary, but I looked at it again and I don’t think it is addicted to the problem that is causing the problem, so I deleted it.
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'); }
Snippet with full code:
<!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> </div> <div data-role="footer"> <div id="status"></div> </div> </div> <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> </div> <script type="text/javascript"> $(loadUI); </script>
javascript jquery-mobile google-apps-script google-sites
Jason malmstadt
source share