Í bæklingi með HTML5 komu fjöldi API góðvild og einn af bestu var forritið Fullscreen sem veitir innfæddan hátt fyrir vafrann til að gera það sem aðeins var hægt í flash í langan tíma: birta vefsíðu í fullskjástillingu fyrir notandann.
Þetta kemur sér vel ef þú ert að sýna myndskeið eða myndir eða ef þú ert að þróa leik. Raunverulegt efni sem þarf að hafa áherslu á getur haft gagn af forritinu Fullscreen.
Og best af öllu er forritið Fullscreen mjög auðvelt að nota ...
Nokkrar aðferðir eru hluti af forritaskilum:
element.requestFullScreen()Þessi aðferð leyfir einum þáttum að fara í fullskjá.
Document.getElementById(“myCanvas”).requestFullScreen()Þetta veldur því að striga með auðkenni 'myCanvas' sé að fara í fullskjá.
document.cancelFullScreen()Þetta hættir einfaldlega í fullskjámynd og kemur aftur í skjalið.
Document.fullScreenÞetta mun koma aftur satt ef notandinn er í fullskjástillingu.
document.fullScreenElementSkilar þáttinum sem er í fullskjástillingu.
Athugaðu að þetta eru venjulegu aðferðirnar en þú verður að þurfa til að fá þetta fyrirfram í Chrome, Firefox og Safari (Internet Explorer og Opera styðja ekki þessa API núna).
Þar sem fyrst þurfum við að finna út hvaða aðferð vafrinn viðurkennir munum við búa til aðgerð sem mun finna rétta aðferðina fyrir vafrann og kalla það:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Eins og þú getur séð alla þessa aðgerð er að sjá hvort einhver beiðniFullScreen aðferðir snúi aftur og þá kallar það þá aðgerð fyrir rétta vafrann með því að nota seljandaforskeyti.
Eftir þetta allt sem við þurfum að gera er að hringja í fullscreen virka eins og svo:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Þetta mun senda hvetja notandann til að biðja um leyfi til að fara í fullskjár, ef það er viðurkennt að öll tækjastikurnar í vafranum muni hverfa og það eina sem er á skjánum verður viðkomandi vefsíðu eða eini þátturinn.
Þessi aðferð krefst einnig seljandaforskeyta, þannig að við munum nota sömu hugmynd og hér að ofan og búa til aðgerð sem mun ákvarða hvaða forskeyti við ættum að nota samkvæmt vafra notandans.
Eitt sem þú munt taka eftir er að þessi aðferð þarf ekki nein atriði liðin því ólíkt beiðniFullScreen aðferðinni gildir það alltaf um allt skjalið.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Knippað með þessu JavaScript API kom CSS gervi-flokkur kallað: fullur skjár og þetta er hægt að nota til að stilla hvaða þætti á vefsíðu þegar það er í fullri skjá ham, þetta getur komið sér vel vegna þess að vafrari stærð eykst smá þegar í fullur skjár ham.
/* 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%;}Vertu meðvituð um að þú getir ekki aðskilið seljandaforskeyti með kommum vegna þess að vafrinn mun ekki lesa þau:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Til þess að stíllinn sé beittur á réttan hátt verður þú að setja hvert seljandaforskeyti í eigin blokk.
Þetta JavaScript API er eitt af því sem minnst er þekkt sem send er með HTML5 en að mínu mati er það bæði skilvirkt og einfalt að framkvæma. Bætt notandi reynsla af því að einbeita sér að einum þáttum, sérstaklega fyrir myndskeið, myndir og leiki, er vel þess virði að fá fáar línur af kóða sem taka þátt.
Hefur þú sett forritið í fullri skjá einhvers staðar? Hvað notar þú til að hugsa um það? Láttu okkur vita í athugasemdunum.