HTML5: n mukana on tullut suuri määrä API-hyvyyttä ja yksi parhaimmista oli Fullscreen-sovellusliittymä, joka tarjoaa selaimelle luonteva tapa tehdä niin pitkään aikaan salamavaloa kuin mahdollista: näyttää verkkosivun koko näytön tilassa käyttäjälle.
Tämä on kätevää, jos näytät videota tai kuvia tai jos kehität peliä. Itse asiassa kaikki sisältö, johon on keskityttävä, voivat hyötyä Fullscreen-sovellusliittymästä.
Ja mikä parasta, Fullscreen API on todella helppokäyttöinen ...
Useat menetelmät ovat osa Fullscreen-sovellusliittymää:
element.requestFullScreen()Tämä menetelmä mahdollistaa yhden elementin siirtymisen koko näytöllä.
Document.getElementById(“myCanvas”).requestFullScreen()Tällöin kangas tunnisteella "myCanvas" pääsee koko näytölle.
document.cancelFullScreen()Tämä yksinkertaisesti poistuu koko näytön tilasta ja palaa asiakirjanäkymään.
Document.fullScreenTämä palaa totta, jos käyttäjä on koko näytön tilassa.
document.fullScreenElementPalauttaa elementin, joka on tällä hetkellä koko näytön tilassa.
Huomaa, että nämä ovat vakiomenetelmiä, mutta toistaiseksi tarvitset myyjän etuliitteitä, jotta voit tehdä tämän työn Chromessa, Firefoxissa ja Safarissa (Internet Explorer ja Opera eivät tällä hetkellä tue tätä sovellusliittymää).
Ensin meidän on selvitettävä, millä tavoin selain tunnistaa, luomme toiminnon, joka löytää oikean menetelmän selaimelle ja puhelulle:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Kuten näet kaiken tämän toiminnon, näet onko jokin requestFullScreen-menetelmistä palautunut, ja sitten se kutsuu toiminnon oikealle selaimelle sen myyjän etuliitteen avulla.
Tämän jälkeen kaikki, mitä tarvitsemme, on kutsua fullScreen-funktio näin:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Tämä lähettää kehotteen käyttäjälle, joka pyytää lupaa siirtyä koko näytölle, jos se hyväksytään, kaikki selaimen työkalurivit häviävät, ja ainoa asia ruudulla on haluttu verkkosivu tai yksittäinen elementti.
Tämä menetelmä edellyttää myös myyjän etuliitteitä, joten käytämme samaa ajatusta kuin yllä ja luodaan funktio, joka määrittää, mikä etuliite meidän pitäisi käyttää käyttäjän selaimen mukaan.
Yksi asia, jonka huomaat, on, että tämä menetelmä ei tarvitse mitään elementtejä, koska toisin kuin requestFullScreen-menetelmä, se koskee aina koko dokumenttia.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Tämän JavaScript-sovellusliittymän mukana on CSS pseudoklassi, jota kutsutaan koko näytöksi, ja sitä voidaan käyttää kaikkien verkkosivun elementtien tyyliin, kun se on koko näytön tilassa. Tämä voi olla kätevä, koska selaimen koko kasvaa hieman, kun koko näytön tila.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}Huomaa, ettet voi erottaa myyjän etuliitteitä pilkuilla, koska selain ei lue niitä:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Jotta tyylit voidaan soveltaa oikein, sinun on sijoitettava jokaisen myyjän etuliite omaan lohkoonsa.
Tämä JavaScript API on yksi vähiten tiedossa, joka toimitetaan HTML5: n kanssa, mutta mielestäni se on sekä tehokas että yksinkertainen. Parannettu käyttökokemus keskittyä yhteen elementtiin, erityisesti videoihin, kuviin ja peleihin, on hyödyllinen vain muutamalla koodilla.
Oletko ottanut koko näytön sovellusliittymän käyttöön missä tahansa? Mitä hyötyjä voit ajatella? Kerro meille kommentit.
Esitetty kuva / pikkukuva, keskittyä kuvaa kautta Shutterstock.