Configuración de La Ventana Metaetiqueta Cuando Desee Visualizar Una Página Web Creada Por GAS Con Un Teléfono Inteligente

18/3/2019 Configuración de la ventana metaetiqueta cuando desee visualizar una página web creada por GAS con un teléfono
on un teléfono inteligente
Configuración de la ventana metaetiqueta cuando desee visualizar una página
Crédito de la foto: Robjstan
Hola amigos!
Es Takahashi ( @ ntakahashi0505 ).
Presentamos HTML para usuarios de GAS y cómo crear una página web simple .
El último artículo está aquí.
Cómo configurar un favicon en una página web creada por GAS

Presentamos HTML para usuarios de GAS, cómo hacer una página web simple. Esta vez, es un método para configurar el favicon a la pá
tonari-it.com
Le expliqué cómo configurar el favicon en la página web de GAS.
Está casi bien, pero me gustaría confirmar una cosa más importante.
Sí, es la pantalla en el teléfono inteligente .
Hay ocasiones en las que desea utilizar una página web creada por GAS con un teléfono inteligente.
En ese caso, se requiere un esfuerzo adicional para el grupo de código que se ha creado hasta el momento.
Por lo tanto , esta vez sobre la configuración de la ventana gráfica de metaetiquetas cuando desee mostrar la página web creada por GAS con un teléfon
Vamonos
Repasar hasta la última vez y el tema de esta vez.

Bueno, voy a revisar la última vez.
El archivo HTML "índice. Html" está aquí.
index.html
1 <!DOCTYPE html>

https://tonari-it.com/gas-web-add-meta-viewport/ 1/6
18/3/2019 Configuración de la ventana metaetiqueta cuando desee visualizar una página web creada por GAS con un teléfono inteligente
2 <html>
3 <head>
4 <base target="_top">
5 <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
6 </head>
7 <body>
8 <nav class="navbar navbar-light bg-light">
9 <a class="navbar-brand" href="https://tonari-it.com">
10 <img src="https://drive.google.com/uc?id=1jDk8h0egYxfKbTTX0YNs-cTHd93Xi68O" width="30" height="30" alt="いつも隣にITのお仕事ロゴ">
11 いつも隣にITのお仕事
12 </a>
13 </nav>
14 <div class="jumbotron">
15 <h1>GASのおすすめ記事⼀覧</h1>
16 いつも隣にITのお仕事からGASのおすすめの記事をピックアップしています。
17 </div>
18 <div class="container">
19 <h2>連載⽬次：超初⼼者向けGASでBotを作りながら基礎を学ぶ</h2>
20 Google Apps Script（GAS）をはじめるためのメリットは⼭程ありますが、何を作ったらいいの？と悩んでしまうこともありますよね。そんな時に、おすすめした
21 <ol>
22 <li><a href="https://tonari-it.com/gas-script-editor/">【初⼼者向けGAS】本当の最初の⼀歩！スクリプトエディタでプロジェクトを開く</a></li>
23 <li><a href="https://tonari-it.com/gas-script-create-save-run/">【初⼼者向けGAS】はじめてのスクリプトを作成し、保存し、実⾏する</a></li>
24 <li><a href="https://tonari-it.com/gas-variable-data-type/">【初⼼者向けGAS】プログラミングに必須の変数の使い⽅とデータ型について</a></li>
25 <li><a href="https://tonari-it.com/gas-logger-log/">【初⼼者向けGAS】ログを表⽰するLogger.logの使い⽅</a></li>
26 <li><a href="https://tonari-it.com/gas-script-approval/">【初⼼者向けGAS】スクリプト実⾏時の「承認」でびっくりしないために</a></li>
27 </ol>
28 <p >（以下略）</p>
29
30 <h2>連載⽬次：GASユーザーのための初めてのHTML・CSS講座</h2>
31 Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初⼼者が、GAS環境を利⽤し
32 <ol>
33 <li><a href="https://tonari-it.com/gas-html-web-page/">Google Apps Scriptで最も簡単なWebページを作成して公開する</a></li>
34 <li><a href="https://tonari-it.com/gas-web-doget-html-output/">GASでWebページを表⽰するdoGet関数のスクリプトについて丁寧に解説</a></li>
35 <li><a href="https://tonari-it.com/gas-html-tag/">GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説</a></li>
36 </ol>
37 </div>
38 <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
39 </body>
40 </html>
Y el "código. Gs" está aquí.
コード.gs
1 function doGet() {
2 var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
3 htmlOutput
4 .setTitle('いつも隣にITのお仕事-GASのおすすめ記事⼀覧')
5 .setFaviconUrl('https://drive.google.com/uc?id=1jDk8h0egYxfKbTTX0YNs-cTHd93Xi68O&.png');
6 return htmlOutput;
7 }
Además, para presentar Bootstrap, "css.html" y "js.html" son los siguientes.
css.html
1 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPX
js.html
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin
2 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20V
3 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6
Así es como se ve una página web:
Está casi terminado.
Se puede decir que ya se ha completado.
Cuando se muestra en un teléfono inteligente
Sin embargo, si esta página web de GAS se muestra en un teléfono inteligente, se volverá así.
Pequeño! ! !
Así es, me siento obligado a empaquetar todo en el tamaño de la pantalla de mi teléfono inteligente ...
Esta vez, vamos a resolver este fenómeno.
Página web compatible con smartphone

Bueno, para concluir de la conclusión, para resolver esto, está bien si la configuración de la ventana gráfica se especifica en la etiqueta meta en la etiqueta

Configuración de viewport en la producción general de páginas web.
Para la creación general de una página web, la siguiente etiqueta meta se describe en la etiqueta de cabecera.
 <meta name = "viewport" content = "width = device-width, initial-scale = 1>
En primer lugar, aunque es una etiqueta meta, es una etiqueta para varias configuraciones .
Y si especifica "viewport" para el atributo de nombre, puede configurar "área de visualización del documento".
Y describiré la configuración de la ventana gráfica en el atributo de contenido , lo anterior es
ancho = ancho del dispositivo : ajuste el ancho del área de visualización al ancho de la pantalla del terminal
escala inicial = 1 : establezca la ampliación del zoom inicial en 1, es decir, sin escala
Significa eso.
Sin embargo, como mencioné en los títulos y favicons de la página hasta este punto, en la página web de GAS, el interior de la etiqueta de cabecera no funcion
Especificar etiqueta meta con addMetaTag
El método addMetaTag se proporciona para especificar la etiqueta meta en la página web de GAS .
Aquí está cómo escribir.
 Objeto HtmlOutput. AddMetaTag (valor de atributo de nombre, valor de atributo de contenido)
En otras palabras, en este caso, se deben realizar los siguientes ajustes.
コード.gs
1 function doGet() {
2 var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
3 htmlOutput
4 .setTitle('いつも隣にITのお仕事-GASのおすすめ記事⼀覧')
5 .setFaviconUrl('https://drive.google.com/uc?id=1jDk8h0egYxfKbTTX0YNs-cTHd93Xi68O&.png')
6 .addMetaTag('viewport', 'width=device-width, initial-scale=1')
7 return htmlOutput;
8 }
Guárdelo aquí y actualice la versión del proyecto con "Nuevo".
Al verificar con un teléfono inteligente, etc., cree una nueva versión cada vez.
Y cuando lo confirme con un smartphone ...
Ahora se muestra en un tamaño fácil de ver en los teléfonos inteligentes.
Resumen
Como se mencionó anteriormente, hemos descrito la configuración de la ventana gráfica de metaetiquetas cuando desea visualizar la página web creada
Si necesita ver la página web de GAS en su teléfono inteligente, será esencial utilizar el método addMetaTag, ¡ así que no lo olvide!
Esta es una introducción a HTML para usuarios de GAS, que se ha descrito hasta ahora, pero una vez que la serie se ha completado hasta el momento.
A continuación, como una nueva serie, me gustaría decirle cómo crear una aplicación web, incluido el JavaScript del lado del cliente.
Conocimientos básicos sobre el uso de JavaScript del lado del cliente en aplicaciones web GAS.
Google Apps Script te permite crear y publicar páginas web. Esta vez, presentaré los conocimientos básicos para el uso de JavaScript de
tonari-it.com
¡Por favor espérenlo!
Serie de contenidos: El primer curso de HTML / CSS para usuarios de GAS.

Google Apps Script también puede crear y publicar páginas web utilizando HTML y CSS. En esta serie, ayudaremos a todos los principiantes de HTML y CSS a
1. Crea y publica la página web más sencilla con Google Apps Script
2. Explique cuidadosamente el script de la función doGet que muestra la página web con GAS.
3. Explique cuidadosamente el código HTML de la página web más simple creada por GAS.
4. [Introducción a HTML para usuarios de GAS] Introduzca las etiquetas HTML básicas que usa con frecuencia
5. [Introducción a HTML para usuarios de GAS] Cómo escribir una etiqueta con un enlace de ancla
6. Cómo insertar una imagen en Google Drive en la página web de GAS
7. El primer paso para diseñar CSS con páginas web creadas por GAS
8. 【Introducción a HTML para usuarios de GAS】 Aplique estilos con CSS solo a elementos favoritos
9. 【Introducción a HTML para usuarios de GAS tags Convenientes etiquetas div y etiquetas de rango para solo especificar el alcance
10. Cómo escribir HTML y CSS en archivos separados al crear una página web con GAS
11. Cómo introducir CSS framework Bootstrap al crear una página web con GAS
12. Cómo el estilo de navegación de la página web de GAS con Bootstrap
13. Cómo hacer una página web muy fácil y un buen diseño con GAS y Bootstrap
14. Cómo configurar el título de la página al crear una página web con GAS

15. Cómo configurar un favicon en una página web creada por GAS
16. Configuración de la ventana metaetiqueta cuando desee visualizar una página web creada por GAS con un teléfono inteligente
Perfil de colaborador
Takahashi Shinoaki
Co., Ltd. Director de Representantes de Notas del Plan
Presidente de Plan Notes Co., Ltd., jefe de la comunidad "instituto de investigación no profesional" Nacido en 1976 en el día del niño. Vive en Tokio, Ita
detallado
★ ¡No dude en contactarnos si tiene alguna solicitud o consulta! → Haga clic aquí para consultas
★ Me alegro si puede seguir.
     
Ultima publicación
2010.03.18
Resumen del informe de actividades de la
"un grupo de estudio de habilidades para no programadores"
Evento de la
comunidad
la
comunidad
2010.03.17 ¡Entra a la
comunidad y rompe la
Evento de trampa
! La historia de que el valor es realmente alto.
2010.03.12 ¡El
primer aterrizaje en Sendai! Mantenido "Skills up study para no programadores y Mokumoku"
Evento comunitario
2017.03.03
【¡Felicitaciones! Blog 4º aniversario] Pensaremos en el futuro y expondremos sobre fotovoltaica, ingresos, el número de solicitudes hasta el momento.
WordPress · blog

Configuración de La Ventana Metaetiqueta Cuando Desee Visualizar Una Página Web Creada Por GAS Con Un Teléfono Inteligente

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Configuración de La Ventana Metaetiqueta Cuando Desee Visualizar Una Página Web Creada Por GAS Con Un Teléfono Inteligente

Enviado por

Direitos autorais:

Formatos disponíveis

18/3/2019 Configuración de la ventana metaetiqueta cuando desee visualizar una página web creada por GAS con un teléfono

Conﬁguración de la ventana metaetiqueta cuando desee visualizar una página

Crédito de la foto: Robjstan

El último artículo está aquí.

Cómo conﬁgurar un favicon en una página web creada por GAS

Le expliqué cómo conﬁgurar el favicon en la página web de GAS.

Sí, es la pantalla en el teléfono inteligente .

Repasar hasta la última vez y el tema de esta vez.

El archivo HTML "índice. Html" está aquí.

Y el "código. Gs" está aquí.

Además, para presentar Bootstrap, "css.html" y "js.html" son los siguientes.

Así es como se ve una página web:

Está casi terminado.

Se puede decir que ya se ha completado.

Cuando se muestra en un teléfono inteligente

Esta vez, vamos a resolver este fenómeno.

Página web compatible con smartphone

Conﬁguración de viewport en la producción general de páginas web.

 <meta name = "viewport" content = "width = device-width, initial-scale = 1>

Y describiré la conﬁguración de la ventana gráﬁca en el atributo de contenido , lo anterior es

Especiﬁcar etiqueta meta con addMetaTag

Aquí está cómo escribir.

 Objeto HtmlOutput. AddMetaTag (valor de atributo de nombre, valor de atributo de contenido)

En otras palabras, en este caso, se deben realizar los siguientes ajustes.

Guárdelo aquí y actualice la versión del proyecto con "Nuevo".

Y cuando lo conﬁrme con un smartphone ...

Ahora se muestra en un tamaño fácil de ver en los teléfonos inteligentes.

¡Por favor espérenlo!

Serie de contenidos: El primer curso de HTML / CSS para usuarios de GAS.

Você também pode gostar