Skip to content

Instantly share code, notes, and snippets.

@TakashiSasaki

TakashiSasaki/css.html

Last active December 22, 2017 01:13
Show Gist options
  • Save TakashiSasaki/e2a22a36414865fc1418 to your computer and use it in GitHub Desktop.
Save TakashiSasaki/e2a22a36414865fc1418 to your computer and use it in GitHub Desktop.
Download ZIP
Google Apps ScriptのHtmlServiceではviewportの指定が許されていないので高解像度のスマートフォンで閲覧するとフォーム要素がとても小さい。ワークアラウンドとしてスタイルにzoomを指定する。
Raw
css.html
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
@media
(-webkit-min-device-pixel-ratio: 3),
(min-resolution: 3ppx){
form { zoom:4 }
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2ppx){
form { zoom:3 }
}
</style>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?>
</head>
</html>
<body>
<?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
</body>
Raw
js.html
<script src="//maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
$(function() {
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment