Todo
HTML5

¿Cómo se puede habilitar el modo de pantalla completa para páginas web en HTML5?

Con tecnología de la IA y la comunidad de LinkedIn

El modo de pantalla completa es una característica que permite que las páginas web ocupen toda la pantalla de un dispositivo, ocultando la interfaz del navegador y otros elementos. Esto puede crear una experiencia más inmersiva y atractiva para los usuarios, especialmente para las páginas web que muestran contenido multimedia, como videos, juegos o presentaciones de diapositivas. En este artículo, aprenderá cómo habilitar el modo de pantalla completa para páginas web en HTML5 utilizando la API de pantalla completa y algunos códigos HTML y CSS básicos.

Expertos destacados en este artículo

Elección de la comunidad a partir de 4 contribuciones. Más información

1 La API de pantalla completa

La API de pantalla completa es una interfaz de JavaScript que proporciona métodos y eventos para solicitar, salir y administrar el modo de pantalla completa. Es compatible con la mayoría de los navegadores modernos, pero es posible que deba usar prefijos de proveedor para algunos navegadores, como webkit o moz. Para usar la API de pantalla completa, debe acceder al documento o a un elemento que desee mostrar en modo de pantalla completa y llamar a requestFullscreen() método en él. Por ejemplo, si tiene un elemento de vídeo con el id "myVideo", puede usar este código para solicitar el modo de pantalla completa cuando el usuario haga clic en él:

var video = document.getElementById("myVideo");
video.addEventListener("click", function() {
  video.requestFullscreen();
});

Para salir del modo de pantalla completa, puede llamar a exitFullscreen() en el objeto Document. Por ejemplo, puede utilizar este código para salir del modo de pantalla completa cuando el usuario presiona la tecla Esc:

document.addEventListener("keydown", function(event) {
  if (event.key === "Escape") {
    document.exitFullscreen();
  }
});

La API de pantalla completa también proporciona algunos eventos que puede escuchar y responder, como fullscreenchange, fullscreenerror y fullscreenenabled. Por ejemplo, puede utilizar el evento fullscreenchange para detectar cuándo cambia el modo de pantalla completa y actualizar el estilo o el contenido de la página web en consecuencia:

document.addEventListener("fullscreenchange", function() {
  if (document.fullscreenElement) {
    // do something when full screen mode is on
  } else {
    // do something when full screen mode is off
  }
});

Añade tu opinión

Vivek Gautam

Engineer @ Flipkart | ReactJs | TypeScript
Denunciar la contribución
You might wonder where tech giants like Flipkart are using Fullscreen API. Yes in Android Webview. Let me explain 1. A/B Testing: Integrating web apps via WebView allows easy experimentation and real-time user feedback, streamlining A/B testing and reducing reliance on frequent app updates. 2. Time Efficiency: Integration offers a quick solution for time-crunched development, delivering feature-rich experiences to users promptly without building native apps from scratch. 3. Instant Updates: It enables real-time content and feature updates, eliminating the need for users to download app updates, and enhancing user experience. 4. Can use smooth Transitions for seamless opening and closing of review.

Traducido

Recomendar
Zainul Abdeen Imran

Wordpress | Html | Css | Javascript | Php | web Developer 🧩
Denunciar la contribución
Difficulty managing full screen mode. Using the Fullscreen in JavaScript. Supported by most modern browsers. - JavaScript interface for full screen. - Methods for requesting and exiting. - Manage full screen mode easily. - Use vendor prefixes for some browsers. - Access document or specific element. - Call requestFullscreen() method for full screen. Fullscreen simplifies managing full screen mode. #FullscreenAPI #JavaScript #WebDevelopment

Traducido

Recomendar

2 HTML y CSS para el modo de pantalla completa

Además de usar la API de pantalla completa, también debe usar código HTML y CSS para que su página web se vea bien y funcione bien en modo de pantalla completa. Por ejemplo, es posible que desee utilizar el comando <meta> para establecer el ancho y el alto de la ventanilla para que coincidan con la d<tamaño de pantalla de hielo y utilice el comando <link> para especificar una hoja de estilos diferente para<Modo de pantalla completa. Por ejemplo, puede utilizar este código en <head> del documento HTML:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fullscreen.css" media="fullscreen">

El atributo media de la <enlace> le permite aplicar una hoja de estilo diferente solo cuando la página web está en modo de pantalla completa. En el archivo .css pantalla completa, puede utilizar el selector de pseudoclase :fullscreen para apuntar al elemento que está en modo de pantalla completa y aplicarle algunos estilos. Por ejemplo, puede usar este código para hacer que el elemento video llene toda la pantalla y oculte los controles en modo de pantalla completa:

video:fullscreen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  controls: none;
}

También puede utilizar consultas multimedia para ajustar el diseño de la página web para diferentes tamaños de pantalla y orientaciones en modo de pantalla completa. Por ejemplo, puede usar este código para cambiar el tamaño de fuente y el color de un elemento de encabezado en función del ancho y la orientación de la pantalla en modo de pantalla completa:

@media (min-width: 768px) and (orientation: landscape) and (fullscreen) {
  h1 {
    font-size: 3rem;
    color: white;
  }
}

Mediante el uso de la API de pantalla completa y algunos códigos HTML y CSS básicos, puede habilitar el modo de pantalla completa para páginas web en HTML5 y crear una experiencia más inmersiva y atractiva para los usuarios. También puede utilizar otras características de HTML5, como los elementos de vídeo y audio, el elemento canvas o la API de audio web, para mejorar el contenido multimedia en modo de pantalla completa.

Añade tu opinión

Vivek Gautam

Engineer @ Flipkart | ReactJs | TypeScript
(editado)
Denunciar la contribución
If you are using in your web app in Android WebView Activity, you need to few lines , and you are good to go. Enable JavaScript: First, ensure that JavaScript is enabled in your WebView, as the Fullscreen API requires JavaScript to work. But first, you need to check is Full-Screen API is supported by the browser, then only we can use it // JavaScript function to enter full-screen mode function enter fullscreen() { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); }

Traducido

Recomendar

3 Esto es lo que más debe considerar

Este es un espacio para compartir ejemplos, historias o ideas que no encajan en ninguna de las secciones anteriores. ¿Qué más le gustaría añadir?

Añade tu opinión

Vivek Gautam

Engineer @ Flipkart | ReactJs | TypeScript
Denunciar la contribución
We should keep in mind, How and where It should be good. I think for Gaming web apps , Presentations and E-Learning, Interactive Web Apps like Dulingo , Rich Visual Experiences: Websites showcasing high-resolution images or intricate visualizations can make use of full-screen mode to fully showcase their content. To enable full-screen mode in HTML5, the Fullscreen API offers a versatile toolkit. By combining HTML, CSS, and JavaScript, developers can create buttons or triggers that allow users to seamlessly toggle between standard and full-screen views. This not only enhances user engagement but also adapts well to various device sizes and orientations.

Traducido

Recomendar

HTML5

Seguir

Valorar este artículo

Hemos creado este artículo con la ayuda de la inteligencia artificial. ¿Qué te ha parecido?

Está genial Está regular

Denunciar este artículo

Ver todo

¿Cómo se puede habilitar el modo de pantalla completa para páginas web en HTML5?

1

2

3

1 La API de pantalla completa

2 HTML y CSS para el modo de pantalla completa

3 Esto es lo que más debe considerar

HTML5

Valorar este artículo

Gracias por tus comentarios

Más artículos sobre HTML5

Lecturas más relevantes