CSSのフルスクリーンボックスはFirefoxでは動作しますがChromeでは動作しません

私は単純な「デッドピクセルファインダー」のWebページを作成しています。 Firefox Quantumでは動作しますが、Chromeでは動作しないコードがあります。CSSのフルスクリーンボックスはFirefoxでは動作しますがChromeでは動作しません

スクリプトセクションでは、ページをクリックするとFullscreen APIを有効にするコードがあります。 Firefox Quantumでは正常に動作します。

....

<style type="text/css"> 
     div 
     { 
      height: 100vh; 
      width: 100wh; 
      background-color: red; 
     }  
    </style> 

</head> 
<body> 
    <div id="box" onclick="full_screen();"></div> 
</body>

しかし、Chromeで、私は黒のページではなく、私は背景色に設定された色を取得しますか？

出典

2017-12-04 user3866319

Shouldn」を幅は「100vw」ですか？私は "wh"は何も意味しないと思う。 – Pointy

100vwで問題を修正しました:) – user3866319

@MuhammetCanTONBUL必要ないdivは正常に動作するはずです。 '。'クラスのためのもので、 '＃'はidのためのものです。ネイティブhtml要素の場合、選択演算子について言及する必要はありません。 –

私はあなたがそこに使用しているAPIの種類を確認していないが、これをチェックアウト：

https://jsfiddle.net/cwoz3qw1/1/

div { 
    height: 100vh; 
    width: 100vw; 
    background-color: red; 
} 


let i = document.querySelector('#box'); 

i.addEventListener('click',() => { 

    if (i.requestFullscreen) { 
    i.requestFullscreen(); 
    } else if (i.webkitRequestFullscreen) { 
    i.webkitRequestFullscreen(); 
    } else if (i.mozRequestFullScreen) { 
    i.mozRequestFullScreen(); 
    } else if (i.msRequestFullscreen) { 
    i.msRequestFullscreen(); 
    } 
});

さらに詳しい情報：

https://www.sitepoint.com/use-html5-full-screen-api/

出典

2017-12-04 14:48:02 Alex

CSSのフルスクリーンボックスはFirefoxでは動作しますがChromeでは動作しません

答えて

関連する問題