How to make webpage full screen

New Page

Hogar It indicates an expandable section or menu, or sometimes previous/next navigation options. technology

How to complete a pantalla in Google Chrome in you Mac or PC

By marissa perino

Updated

August 4, 2022

A bookmark

The letter F. An envelope. It indicates the possibility of sending an e-mail.

A curved arrow pointing to the right.

A stylized bird with an open mouth, tweeting. Twitter LinkedIn Flipboard The word “in”. A stylized letter F. The letter F. Facebook An envelope. It indicates the possibility of sending an e-mail. Correo electrónico An image of a chain link. It symmobilizes a link URL to a website. Copy link

Download the app

woman using mac laptop headset

It’s easy to use full pantalla in Google Chrome. Shutterstock

  • For full pants in Google Chrome, click on the full pants mode icon in the Hamburg menu.
  • You can also access a pantalla completa pressing “F11” in PC or “Control + Commando + F” in Mac.
  • Mac users can also press the “Expand Window” button to enter or exit full screen in Chrome.

If you want to use Google Chrome without being distracted by other screen elements, you can simply enable full screen mode. 

The way you enable full screen in Chrome is similar on PC and Mac – the biggest difference is in the keyboard shortcuts. 

Here’s what you need to know.

What is full screen on Chrome? 

Google Chrome’s full-screen mode allows users to eliminate distractions while browsing the Internet by hiding all other programs.

It also hides the dock or taskbar at the bottom of your screen, which means you can’t open other programs either.

How to Go Full Screen in Google Chrome on PC or Mac

1. Open Google Chrome on your PC or Mac.

2. Click on the three vertical dots – also known as the hamburger menu – in the upper right corner of your Chrome window. 

Google Chrome window, with the three vertical dots in the top right menu highlighted.

Click on the hamburger menu. Stefan Ionescu

3. Click the full screen mode icon – the button that looks like an empty square – it’s right next to the Zoom option.

The Google Chrome menu that appears when you click on the hamburger menu, with the full screen mode icon highlighted.

Click the full screen mode icon. Stefan Ionescu

Quick tip  : Mac users can also click the little green dot in the upper left corner of the Chrome window. This button is available in most Mac apps and will make your apps fill the screen. Clicking on the same point will also exit full screen mode.

The Chrome window on Mac, with the small green dot highlighted in the upper left corner.

Mac users can also use the little green dot to enter and exit full screen mode. Stefan Ionescu

4. To exit full screen mode, place your mouse pointer at the top of the screen.

5. An X button will appear in the top center of the screen. Click it to exit full screen mode.

Chrome in fullscreen mode, with the "X" button to exit fullscreen mode highlighted.

Click the “X” button to exit full screen mode in Chrome. Stefan Ionescu

Quick tip : You can also press F11 to enter and exit Google Chrome full screen mode on PC. On Mac, press Ctrl + Command + F to do the same.

mperino

Marissa Perino

Marissa Perino is a former editorial intern covering the executive lifestyle. She previously worked at Cold Lips in London and Creative Nonfiction in Pittsburgh. She studied journalism and communications at the University of Pittsburgh, as well as creative writing. Find her on Twitter: @mlperino.

Read more Read less

Related Articles

5e446d222dae5c1e3c47e293 5e446d222dae5c1e3c47e293

TECH How to Change Font in Google Chrome and Adjust Text Size or Appearance in Your Browser

5de57ee6fd9db20f236592a7 5de57ee6fd9db20f236592a7

TECH How to Add Bookmarks in Google Chrome on Desktop or Mobile

5de56d4cfd9db26af1456619 5de56d4cfd9db26af1456619

TECH How to stop pop-ups in Google Chrome by enabling the browser’s built-in blocker

5e39cf895bc79c20144752d2 5e39cf895bc79c20144752d2

TECH How to Change Your Home Page on a Google Chrome Browser for Mac or PC

How to Google Chrome Reference Freelancer

After…

Deux lignes croisées qui forment un ‘X’. Il indique un moyen de fermer une interaction ou de rejeter une notification.

Vidéo recommandée

Alimenté par

00:26/08:21

dix

369K

2

Comment les fermes de lavande peuvent aider à restaurer des terres détruites par des années d’extraction de charbon

Partager

Prochain

Rester

live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view live view

Mettre la fenêtre du navigateur en plein écran

Mise à jour : 05/03/2022 par Computer Hope

Sur un ordinateur Windows, vous pouvez configurer Google Chrome, Internet Explorer, Microsoft Edge ou Mozilla Firefox en mode plein écran, en masquant les barres d’outils et la barre d’adresse en appuyant sur la touche F11. Pour annuler cette action et afficher à nouveau ces éléments, appuyez à nouveau sur F11.

Noter

Si appuyer sur F11 n’a aucun effet, vous devrez peut-être appuyer sur la touche Fn, et tout en appuyant sur cette touche, appuyez sur F11.

Computer Hope website in full screen mode

To set an Internet browser like Safari to full screen on a macOS computer, press Command+Control+F.

Note

In full-screen mode on a Mac, the browser’s address bar and toolbars are still displayed.

Related information

  • Chrome tips
  • Internet Explorer tips
  • Firefox tips
  • Safari help

Making Fullscreen Experiences

Oct 1, 2016 — Updated Sep 20, 2018

On this page

  • Getting your app or site fullscreen
    • Request the browser go fullscreen in response to a user gesture
    • Launching a page fullscreen from home screen
    • Fake it: auto-hide the address bar
  • UX guidelines
    • Don’t rely on navigation controls
    • Keep the user in the fullscreen experience
    • Let the user choose when to go fullscreen
    • Don’t spam the user to install your app to a home screen
  • Conclusion
  • Feedback

We have the ability to easily make immersive fullscreen websites and applications, but like anything on the web there are a couple of ways to do it. This is especially important now that more browsers are supporting an “installed web app” experience which launch fullscreen.

Getting your app or site fullscreen #

There are several ways that a user or developer can get a web app fullscreen.

  • Request the browser go fullscreen in response to a user gesture.
  • Install the app to the home screen.
  • Fake it: auto-hide the address bar.

Request the browser go fullscreen in response to a user gesture #

Not all platforms are equal. iOS Safari doesn’t have a fullscreen API, but we do on Chrome on Android, Firefox, and IE 11+. Most applications you build will use a combination of the JS API and the CSS selectors provided by the fullscreen specification. The main JS API’s that you need to care about when building a fullscreen experience are:

  • element.requestFullscreen() (currently prefixed in Chrome, Firefox, and IE) displays the element in fullscreen mode.
  • document.exitFullscreen() (currently prefixed in Chrome, Firefox and IE. Firefox uses cancelFullScreen() instead) cancels fullscreen mode.
  • document.fullscreenElement (currently prefixed in Chrome, Firefox, and IE) returns true if any of the elements are in fullscreen mode.

You will notice that in the prefixed versions there is a lot of inconsistency between the casing of the ‘S’ in screen. This is awkward, but this is the problem with specs that are in flight.

When your app is fullscreen you no longer have the browser’s UI controls available to you. This changes the way that users interact with your experience. They don’t have the standard navigation controls such as Forwards and Backwards; they don’t have their escape hatch that is the Refresh button. It’s important to cater for this scenario. You can use some CSS selectors to help you change the style and presentation of your site when the browser enters fullscreen mode.

Copy the code <button id=”goFS”>Go fullscreen</button><script> var goFS = document.getElementById(‘goFS’); goFS.addEventListener( ‘click’, function () { document.body.requestFullscreen(); }, false, );</script>

The example above is a bit contrived; I’ve hidden all the complexity around using vendor prefixes.

The actual code is much more complex. Mozilla has created a very useful script that you can use to toggle fullscreen. As you can see, the provider prefix situation is complex and cumbersome compared to the specified API. Even with the slightly simplified code below, it’s still complex.

Copy code function toggleFullScreen() { var doc = window.document; var docEl = doc.documentElement; var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen; var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitQuitFullscreen || doc.msExitFullscreen; if ( !doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement ) { requestFullScreen.call(docEl); } else { cancelFullScreen.call(doc); }}

We web developers hate complexity. A nice abstract high-level API you can use is Sindre Sorhus’ Screenfull.js module which unifies the two slightly different JS APIs and vendor prefixes into one cohesive API.

Full Screen API Tips #

Make document full screen #

Full screen on the body elementFigure 1: Full screen on the body element.

It’s natural to think you’re taking the body element fullscreen, but if you’re on a WebKit or Blink based renderer, you’ll see it has a weird effect of shrinking the width of the body to the smallest possible size that will contain all the content. (Mozilla Gecko is fine.)

Full screen on document elementFigure 2: Full screen on document element.

To solve this problem, use the document element instead of the body element:

Copy the code document.documentElement.requestFullscreen();

Put a video element in full screen #

Putting a video element in full screen is exactly the same as putting any other element in full screen. You call the requestFullscreen method on the video element.

Copy the code <video id=”videoElement”></video><button id=”goFS”>Go full screen</button><script> var goFS = document.getElementById(‘goFS’); goFS.addEventListener( ‘click’, function () { var videoElement = document.getElementById(‘videoElement’); videoElement.requestFullscreen(); }, false, );</script>

If your <video> element doesn’t have the controls attribute set, there’s no way for the user to control the video once it’s full screen. The recommended way to do this is to have a base container that encapsulates the video and controls you want the user to see.

Copy code <div id=”container”> <video></video> <div> <button>Play</button> <button>Stop</button> <button id=”goFS”>Go fullscreen< /button> </div></div><script> var goFS = document.getElementById(‘goFS’); goFS.addEventListener( ‘click’, function () { var container = document.getElementById(‘container’); container.requestFullscreen(); }, false, );</script>

This gives you much more flexibility as you can combine the container object with the CSS pseudo selector (e.g. to hide the “goFS” button.)

Copy the code <style> #goFS:-webkit-full-screen #goFS { display: none; } #goFS:-moz-full-screen #goFS { display: none; } #goFS:-ms-fullscreen #goFS { display: none; } #goFS:fullscreen #goFS { display: none; }</style>

Using these patterns you can detect when full screen is running and adapt your UI accordingly, for example:

  • By providing a link to the start page
  • By providing a mechanism to close dialogs or go back

Launching a full screen page from the home screen#

Lancer une page Web en plein écran lorsque l’utilisateur y accède n’est pas possible. Les fournisseurs de navigateurs sont très conscients qu’une expérience plein écran à chaque chargement de page est une énorme gêne, par conséquent, un geste de l’utilisateur est nécessaire pour entrer en plein écran. Les fournisseurs autorisent cependant les utilisateurs à “installer” des applications, et l’acte d’installation est un signal au système d’exploitation que l’utilisateur souhaite lancer en tant qu’application sur la plate-forme.

Sur les principales plates-formes mobiles, il est assez facile à mettre en œuvre à l’aide de balises méta ou de fichiers manifestes comme suit.

iOS #

Since the launch of the iPhone, users have been able to install web apps on the home screen and launch them as full-screen web apps.

Copy the code <meta name=”apple-mobile-web-app-capable” content=”yes” />

If content is set to yes, the web application runs in full-screen mode; otherwise, it is not. The default behavior is to use Safari to view web content. You can determine whether a web page is displayed in full-screen mode using the Boolean read-only window.navigator.standalone JavaScript property.

Apple

Chrome for Android #

The Chrome team recently implemented a feature that instructs the browser to launch the page in full screen when the user has added it to the home screen. It is similar to the iOS Safari model.

Copy the code <meta name=”mobile-web-app-capable” content=”yes” />

You can configure your web application to have an application shortcut icon added to a device’s home screen and the application to launch in full-screen “application mode” using the Chrome’s “Add to Home Screen” menu item for Android.

Google Chrome

A better option is to use the web application manifest.

Web App Manifest (Chrome, Opera, Firefox, Samsung)#

Le manifeste pour les applications Web est un simple fichier JSON qui vous donne, en tant que développeur, la possibilité de contrôler la façon dont votre application apparaît à l’utilisateur dans les zones où il s’attendrait à voir des applications (par exemple, l’écran d’accueil mobile), de diriger ce que le l’utilisateur peut lancer et, plus important encore, comment il peut le lancer. À l’avenir, le manifeste vous donnera encore plus de contrôle sur votre application, mais pour le moment, nous nous concentrons uniquement sur la manière dont votre application peut être lancée. Spécifiquement:

  1. Informer le navigateur de votre manifeste
  2. Décrivant comment lancer

Once you’ve created the manifest and it’s hosted on your site, all you need to do is add a link tag from all of your pages that encompass your app, like so:

Copy the code <link rel=”manifest” href=”/manifest.json” />

Chrome supports manifests since version 38 for Android (October 2014) and gives you control over how your web app appears when installed on the home screen (via properties short_name, name and icons ) and how it should be launched when the user clicks the launch icon (via start_url, display and orientation).

An example manifest is shown below. It doesn’t show everything that can be in a manifesto.

Copy the code { “short_name”: “Kinlan’s Amaze App”, “name”: “Kinlan++’s Amazing App”, “icons”: [ { “src”: “launcher-icon-4x.png “, “sizes”: “192×192”, “type”: “image/png” } ], “start_url”: “/index.html”, “display”: “standalone”, “orientation”: “landscape”}

This feature is fully progressive and allows you to create better, more integrated experiences for users of a browser that supports the feature.

Lorsqu’un utilisateur ajoute votre site ou votre application à l’écran d’accueil, l’utilisateur a l’intention de le traiter comme une application. Cela signifie que vous devez viser à diriger l’utilisateur vers les fonctionnalités de votre application plutôt que vers une page de destination de produit. Par exemple, si l’utilisateur doit se connecter à votre application, c’est une bonne page à lancer.

Applications utilitaires #

La majorité des applications utilitaires en bénéficieront immédiatement. Pour ces applications, vous souhaiterez probablement qu’elles soient lancées de manière autonome, comme toutes les autres applications sur une plate-forme mobile. Pour indiquer à une application de se lancer de manière autonome, ajoutez ceci au manifeste de l’application Web :

Copy the code “display”: “standalone”

Games #

The majority of games will benefit from a manifest immediately. The vast majority of games will want to launch full screen and force a specific orientation.

If you’re developing a vertical scrolling or game like Flappy Birds, you’ll probably want your game to always be in portrait mode.

Copy code “display”: “full screen”, “orientation”: “portrait”

If, on the other hand, you’re building a puzzle or game like X-Com, you’ll probably want the game to always use landscape orientation.

Copy the code “display”: “full screen”, “orientation”: “landscape”

News Sites#

In most cases, news sites are pure content-based experiences. Most developers naturally wouldn’t think of adding a manifesto to a news site. The manifest will allow you to define what to launch (the home page of your news site) and how to launch it (full screen or as a normal browser tab).

The choice is yours and how you think your users will like to access your experience. If you want your site to have all the browser chrome you expect from a site, you can set the display to browser.

Copy the code “display”: “browser”

If you want your news site to look like the majority of news-centric apps treat their experiences like apps and remove any web-like chrome from the UI, you can do that by setting the display on stand-alone.

Copy the code “display”: “standalone”

Fake it: automatically hides the address bar #

You can “simulate full screen” by automatically hiding the address bar as follows:

Copy the code window.scrollTo(0, 1);

Caution

Warning: I am telling you this as a friend. It exists. It’s one thing, but it’s a hack. Please do not use it. -Paul

This is a pretty simple method, the page loads and the browser bar is told to get out of the way. Unfortunately it is not standardized and not well supported. You also have to work around a bunch of quirks.

For example browsers often restore the position on the page when the user navigates back to it. Using window.scrollTo overrides this, which annoys the user. To work around this you have to store the last position in localStorage, and deal with the edge cases (for example, if the user has the page open in multiple windows).

UX guidelines #

When you are building a site that takes advantage of full screen there are a number of potential user experience changes that you need to be aware of to be able to build a service your users will love.

Don’t rely on navigation controls #

iOS doesn’t have a hardware back button or refresh gesture. Therefore, you need to ensure that users can navigate the application without being locked in.

You can easily detect whether you are running in fullscreen or installed mode on all major platforms.

iOS#

On iOS, you can use the navigator.standalone boolean to see if the user has launched from the home screen or not.

Copy the code if (navigator.standalone == true) { // My application is installed and therefore in full screen}

Web App Manifest (Chrome, Opera, Samsung)#

When launching as an installed app, Chrome doesn’t run in true fullscreen experience, so document.fullscreenElement returns null and CSS selectors don’t work.

When the user requests fullscreen via a gesture on your site, the standard fullscreen APIs are available, including the pseudo CSS selector which allows you to tailor your UI to react to the fullscreen state as follows

Copy code selector:-webkit-full-screen { display: block; // display the element only in full screen} selector { display: none; // hide element when not in fullscreen mode}

If users launch your site from the home screen, the display mode media query will be set to what was defined in the web application manifest. In the case of pure full screen it will be:

Copy the code @media (display mode: full screen) {}

If the user launches the application in standalone mode, the media query in display mode will be standalone:

Copy @media code (display mode: standalone) {}

#Firefox

When the user requests fullscreen through your site or the user launches the application in fullscreen mode, all standard fullscreen APIs are available, including the pseudo CSS selector, which allows you to tailor your UI to react to the fullscreen state as follows:

Copy the code selector :-moz-full-screen { display: block; // hide element when not in fullscreen mode} selector { display: none; // hide element when not in fullscreen mode}

Internet Explorer#

In IE, the CSS pseudo-class does not have a hyphen, but otherwise works the same as Chrome and Firefox.

Copy code selector: -ms-fullscreen { display: block; } selector { display: none; // hide element when not in fullscreen mode}

Specification #

The spelling in the spec matches the syntax used by IE.

Copy the code selector:fullscreen { display: block;}selector { display: none; // hide element when not in fullscreen mode}

Keep user in fullscreen experience#

The full-screen API can be a bit temperamental at times. Browser vendors don’t want to lock users into a fullscreen page, so they’ve developed mechanisms to get out of fullscreen as soon as possible. This means that you cannot create a full-screen website that spans multiple pages because:

  • Changing the URL programmatically using window.location=”http://example.com” exits full screen.
  • A user clicking on an external link inside your page will leave full screen mode.
  • Changing the URL through the navigator.pushState API will also exit the full-screen experience.

You have two options if you want the user to remain in full screen mode:

  1. Use installable web application mechanics to go full screen.
  2. Manage your UI and application state using the # fragment.

By using the #syntax to update the URL (window.location = “#somestate”), and listening for the window.onhashchange event, you can use the browser’s own history stack to handle changes in the browser. application state, allow the user to use their hardware back buttons, or provide a simple programmatic back button experience using the history API as follows:

Copy the code window.history.go(-1);

Let the user choose when to go fullscreen #

There is nothing more annoying to the user than a website doing something unexpected. When a user is browsing your site, don’t try to trick them into full screen.

Don’t intercept the first touch event and call requestFullscreen().

  1. It’s boring.
  2. Browsers may decide to prompt the user at some point in the future to allow the application to occupy the full screen.

If you want to launch full-screen apps, consider using the install experiences for each platform.

Don’t spam the user to install your app on a homescreen #

If you plan to provide a full-screen experience through installed application mechanisms, be considerate of the user.

  • Be discreet. Use a banner or footer to let them know they can install the app.
  • If it ignores the prompt, don’t show it again.
  • On a user’s first visit, they are unlikely to want to install the app unless they are happy with your service. Consider inviting them to install after a positive interaction on your site.
  • If a user regularly visits your site and does not install the app, they are unlikely to install your app in the future. Don’t keep spamming them.

Conclusion #

Although we don’t have a fully standardized and implemented API, by using some of the tips in this article, you can easily create experiences that take advantage of the user’s entire screen, regardless of the customer.

Feedback #

Last updated: September 20, 2018 — Improve the article

To share

subscribe


Video How to make webpage full screen

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…