Выяўленне поўнаэкраннага рэжыму

Сучасная настольная версія IE 10 заўсёды поўнаэкранны рэжым.

Існуе жывы спецыфікацыі для : поўнаэкранны рэжым псеўда-клас па W3

Але калі я спрабаваў выявіць у поўнаэкранным рэжыме з jQuery версіі 1.9.x і 2.x:

$(document).is(":fullscreen") 

ён кінуў гэтую памылку:

<�Р> Сінтаксічная памылка, не прызнаваны выраз: поўнаэкранны рэжым

пытанні:

  1. Is it because jQuery doesn't recognize this standard yet or IE10?

  2. What is the legacy way of checking fullscreen mode? I am expecting following results:

    function IsFullScreen() {
         /* Retrun TRUE */
         /* If UA exists in classic desktop and not in full screen  */
         /* Else return FALSE */
    }
    
  3. Can we do it without browser sniffing?

37
FWIW, што частка кода jQuery не працуе ў апошняй Mozilla Firefox, а таксама, дзе псеўда-класа, безумоўна, вызначаецца.
дададзена аўтар Annie, крыніца
@Vohuman, IE11 падтрымлівае приставочные версіі : поўнаэкранны рэжым : : мс-поўнаэкранны рэжым і IE папярэдняй версіі мае ААН-прыстаўцы версія падтрымкі. Крыніца: status.modern.ie/fullscreenapi?term=fullscreen .
дададзена аўтар Annie, крыніца
Амаль 4 гады таму што гэта пытанне было зададзена пытанне - ці ёсць сур'ёзна <�я> яшчэ </я> не стандартны спосаб зрабіць гэта, які працуе на браўзэрах не абнаўляецца на працягу апошніх 2-х гадоў?
дададзена аўтар csvan, крыніца
Паспрабуйце праверыць, калі вышыня акна роўная вышыня экрана, але гэта, верагодна, не вельмі надзейна небудзь?
дададзена аўтар adeneo, крыніца
«Спадчына» адказ у тым, што браўзэр не падтрымлівала рэжым «поўны экран» да нядаўняга часу, і многія з іх да гэтага часу няма.
дададзена аўтар meagar, крыніца
IE не падтрымлівае : поўнаэкранны рэжым , developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
дададзена аўтар undefined, крыніца
Для успадкаванай пытання см гэты дублікат: stackoverflow.com/q/1047319/1180785 (хоць гэта не мае канчатковага адказу, ў яго ёсць некаторыя хакі і браузерные канкрэтныя тэсты)
дададзена аўтар Dave, крыніца

12 адказы

Як вы выявілі, сумяшчальнасць браўзэра з'яўляецца вялікім недахопам. У рэшце рэшт, гэта нешта вельмі новае.

Аднак, так як вы працуеце ў JavaScript, у вас ёсць значна больш магчымасцяў, даступных для Вас, чым калі б вы былі толькі з дапамогай CSS.

Напрыклад:

if( window.innerHeight == screen.height) {
   //browser is fullscreen
}

Вы таксама можаце праверыць некаторы трохі больш друзлае параўнанне:

if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
   //browser is almost certainly fullscreen
}
45
дададзена
Дзякуй за ваш адказ. Ён працуе ў цяперашні час. Спадзяецца, што распрацоўнікі браўзэраў і jQuery хлопцы разумеюць важнасць: поўнаэкранны псеўда-клас.
дададзена аўтар Annie, крыніца
Гэта ламае, калі карыстальнік наязджае на гэтай старонцы. window.innerHeight змены і выяўленне больш не працуе. Магчымыя выпраўлення для гэтага?
дададзена аўтар s1h4d0w, крыніца
<�Код> screen.height і screen.availHeight не працуе з некалькімі маніторамі. Прынамсі, у IE 10, вы заўсёды атрымаеце дазвол асноўнага манітора (які не можа быць адзін адлюстроўваючы акно браўзэра), так што параўнанне супраць window.innerHeight цалкам бессэнсоўна. <�Код> window.screenTop == 0 && window.screenY == 0 гэтае рашэнне мульты-манітор для IE 10, але <�я> не працуе у іншых браўзэрах.
дададзена аўтар user113215, крыніца
будзе няўдалай ўстаноўкі падвойнага манітора, асабліва калі наўтбук падлучаны на другасным маніторы з розным дазволам.
дададзена аўтар Bekim Bacaj, крыніца
Ну, ну, ну, падобна, што я знайшоў маленькую праблему .. націсніце F12 у Chrome і адкрыйце кансоль, а затым націсніце клавішу F11 і перайсці ў поўнаэкранны рэжым, гэты код не будзе працаваць тады. Любое рашэнне?
дададзена аўтар super, крыніца
Для мяне screen.height роўна window.outerHeight, ня innerHeight, калі ў поўнаэкранным рэжыме.
дададзена аўтар Piyush Soni, крыніца
Не працуе прама на хром мабільны .. (я мяркую, што яго таму, што мая старонка вышыня фактычна не расцягваць зморшчыны)
дададзена аўтар jfaron, крыніца
Некаторыя браўзэры захоўваюць хром (Укладкі, назвы, панэль закладак і г.д.), калі ў поўнаэкранным рэжыме, так што window.outerHeight - window.innerHeight будзе раўняцца вышыні гэтага матэрыялу. Карыстаецеся Ці вы innerHeight або outerHeight і як вы іх выкарыстоўваеце, залежыць ад таго, што вы хочаце, каб выявіць.
дададзена аўтар thure, крыніца

падзея спрацоўвае, калі браўзэр змяняе рэжым поўнага экрана. Вы можаце выкарыстоўваць, каб задаць гэтае значэньне, якую можна праверыць, каб вызначыць, ці з'яўляецца браўзэр на ўвесь экран ці не.

this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;//This will return true or false depending on if it's full screen or not.

$(document).on ('mozfullscreenchange webkitfullscreenchange fullscreenchange',function(){
       this.fullScreenMode = !this.fullScreenMode;

      //-Check for full screen mode and do something..
      simulateFullScreen();
 });





var simulateFullScreen = function() {
     if(this.fullScreenMode) {
            docElm = document.documentElement
            if (docElm.requestFullscreen) 
                docElm.requestFullscreen()
            else{
                if (docElm.mozRequestFullScreen) 
                   docElm.mozRequestFullScreen()
                else{
                   if (docElm.webkitRequestFullScreen)
                     docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
                }
            }
     }else{
             if (document.exitFullscreen) 
                  document.exitFullscreen()
             else{ 
                  if (document.mozCancelFullScreen) 
                     document.mozCancelFullScreen()
                  else{
                     if (document.webkitCancelFullScreen) 
                         document.webkitCancelFullScreen();
                  }
             }
     }

     this.fullScreenMode= !this.fullScreenMode

}
12
дададзена
@JoeFaron: Так, гэта мае сэнс. Я буду рэдагаваць свой адказ, каб уключыць гэта.
дададзена аўтар anurag_29, крыніца
Гэта працуе, размешчаны выгляд вэб ў UWP прыкладанняў. Дзякуй.
дададзена аўтар Mahmoud Al-Qudsi, крыніца
гэта не правільна вызначыць, калі ён быў у поўным аб'ёме на хром мабільны .. змяніў яго: this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
дададзена аўтар jfaron, крыніца

Гэта будзе працаваць на IE9 + і іншых сучасных браўзэрах

function isFullscreen(){ return 1 >= outerHeight - innerHeight };

Выкарыстанне «1» (замест нуля), так як у сістэме, час ад часу, можа проста рэзерваваць вышыню ў адзін піксель для ўзаемадзеяння мышы з некаторымі ўтоенымі або рассоўнымі панэлямі каманд, у гэтым выпадку поўнаэкраннага рэжым выяўленне пацерпіць няўдачу.

  • таксама <�моцны> праца для любога асобнага дакумент-элемент адбываецца ў поўнаэкранным рэжыме ў любы час.
4
дададзена
Прыняты адказ больш не працуе для Firefox Quantum і Chrome, але гэта робіць. Павінна быць прынята адказваць на 2017 год, дзякуй!
дададзена аўтар lama12345, крыніца
@Snorvarg - Дзякуй за пацверджанне.
дададзена аўтар Bekim Bacaj, крыніца
Працуе ідэальна падыходзіць у Edge, Chrome і Firefox, дзякуй. :)
дададзена аўтар Snorvarg, крыніца

Выкарыстоўвайце fullscreenchange падзея для выяўлення поўнаэкраннага падзеі змены, або калі вы не хочаце апрацоўваць прэфіксы, чым вы можаце таксама слухаць змяніць памер падзея (падзея вокны змены памеру, што таксама спрацоўвае, калі ўвесь экран ўводу або выхаду), а затым праверыць, калі document.fullscreenElement ня роўнае нулю, каб вызначыць, ці з'яўляецца поўнаэкранны рэжым уключаны. Вам трэба вендара прэфікс fullscreenElement адпаведна. Я хацеў бы выкарыстаць нешта накшталт гэтага:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx has a good example for this which I quote below:

document.addEventListener("fullscreenChange", function() {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });
4
дададзена
я не лічу, што гэта працуе ў хром
дададзена аўтар Anthony, крыніца

Яна працуе ў IE 8, і я пішу на пэўную вэб-старонку для IE 8. Я не трэба, каб праверыць, калі іншыя браўзэры падтрымліваюць гэта ці не.

function isFullScreen(){
    return window.screenTop == 0 ? true : false;
}
2
дададзена
Можа быць, вы маглі б спрасціць яго проста гэты вяртаўся вярнуцца window.screenTop == 0 .
дададзена аўтар Fernando M. Pinheiro, крыніца

Паспрабуйце гэта! Працуе на апошнія версіі браўзэраў.

if (!window.screenTop && !window.screenY) {
    alert('Fullscreen mode......');
}

Вы можаце таксама выкарыстоўваць гэтага jQuery плягін для ж.

$(window).bind("fullscreen-on", function(e) {
alert("FULLSCREEN MODE");
});
1
дададзена
калі (! window.screenTop &&! window.screenY) не працуе ў некаторых выпадках (калі акно браўзэра не мае межаў, і карыстальнік мае акно максімізуецца, напрыклад).
дададзена аўтар Hoffmann, крыніца
Не працуе, калі браўзэр (Chrome) мацуецца да пачатку.
дададзена аўтар igorpavlov, крыніца

Modernizr FTW ? Give this gist a try.

0
дададзена

Вось яшчэ адно рашэнне, якое працуе ў IE 11:

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen || (document.msFullscreenElement != null);
if (isFullScreen) {
    console.log('fullScreen!');
} else {
    console.log('no fullScreen!');
}

});

0
дададзена

Я распрацаваў добры спосаб зрабіць гэта:

w = $('body').width();

if (w == '4800' || w == '4320' || w == '4096' || w == '3200' || w == '3072' || w == '2880' || w == '2560' || w == '2400' || w == '2160' || w == '2048' || w == '1920' || w == '1800' || w == '1620' || w == '1600' || w == '1536' || w == '1440' || w == '1280' || w == '1200' || w == '1152' || w == '1080' || w == '1050' || w == '1024' || w == '960' || w == '900' || w == '864' || w == '800' || w == '768' || w == '720') {
      //User is fullscreen
}

Затым ўсталюйце шырыню па змаўчанні для цела:

body { width: calc(100% - 1px) }
0
дададзена
і што, калі карыстальнік зрабіў свой браўзэр менш ... як палова вокны?
дададзена аўтар Mephiztopheles, крыніца
Я быў, відавочна, маючы псіхічнае засмучэнне, калі я думаў пра гэта! Страшная думка, Джэк.
дададзена аўтар Jack Nicholson, крыніца
var isFullScreen = function()
{
    var dom = document.createElement("img");
    if ("requestFullscreen" in dom
        || "requestFullScreen" in dom
        || "webkitRequestFullScreen" in dom
        || "mozRequestFullScreen" in dom){
        return !0;
    }
    return !1;
}
0
дададзена
гэта вызначае толькі калі браўзэр дазваляе поўнаэкранны рэжым або няма
дададзена аўтар jck, крыніца

Спрабавалі Ці вы $ (акно) замест $ (дакумент). Выканайце адзін прыклад http://webification.com/tag/detect-fullscreen-jquery .

0
дададзена

Вось яшчэ адно рашэнне, якое можа працаваць для вас:

function isFullScreen() {
return Math.abs(screen.width - window.innerWidth) < 10; 
}

Я аддаю перавагу выкарыстоўваць шырыню, так як гэта дапаможа працаваць вакол укладак і інфармацыі для распрацоўшчыкаў на дне.

0
дададзена