HTML 5フルスクリーンAPIのFireFox/Chromeでの表示の違い
5788 ワード
一、人人网上......
今日、ネットで同級生が干した写真を見ていると、このボタンを見つけました.
このボタンは?何度も移動しましたが、
titleのヒントはありませんでした.図形も代表的ではありません.輪の意味は?——輪人??そうですか??注文する勇気がなくて、注文して何が起こるか分からないで、ブラウザは消すことができますか?!私は長い間思想闘争をしていたが,やっと弱体化した.草ラクダ、意外にも--全画面に表示されたヒント:
皆さん、新しい技术を使うのは提唱に値しますが、このサークルにもヒントを与えません.さもなくば、私达の脆弱な小さい心臓はまったく耐えられません——スクリーンはすぐに黒くなって透き通っています——ゲイツは私のシステムが海賊版の黒くなった私のスクリーンを発見したと思っています!!!
よし、三国殺しを2本遊んで、気持ちが落ち着いて、本題に戻ります.人人網というフルスクリーン効果はHTML 5のフルスクリーンAPIで、実はeasyを使っています!フルスクリーンAPIについては、年初に耳にしたことがありますが、テストや理解をしていません.今では、誰もが実際のプロジェクトで使用しています.明らかに、自分のプロジェクトでクールにしたり、HTML 5の中毒を経験したりする必要があります.
二、関連文章及びいくつかの技術点
検索してみると、紹介された文章はまだ少なくありません.参考にしてください.
click、mousedwon、mouseupイベントは .requestFullScreen();現在、異なるブラウザでは、mozRequestFullScreenまたはwebkitRequestFullScreenの .cancelFullScreen();同様に、異なるブラウザは、mozCancelFullScreenまたはwebkitCancelFullScreenのようなプライベートプレフィックスを追加する必要がある.document.fullScreenによってブラウザがフルスクリーン状態であるか否かを判断することができる.注意:FireFoxとChromeの書き方は異なり、Webkitカーネルブラウザにはis、例えばdocument.webkitIsFullScreenを追加する必要があります.Firefoxはdocument.mozFullScreenである.:full-screen{} CSSコードでは、フルスクリーン要素(およびそのサブ要素)のフルスクリーン状態を制御する際のスタイルを使用できます.同様に、異なるブラウザでは接頭辞が異なります.例えば:-moz-full-screen{}または:- webkit-full-screen{}である.#element:full-screen{}のようなセレクタを使用してそれぞれ制御することができます.もし以上のびっしりした文字があなたの頭を大きく見て、簡単な閲覧に変えたら、あなたはここをひどくクリックすることができます:HTML 5 full-screenフルスクリーンAPIテストdemo
demoページをクリックすると、万年変わらない張含韻写真が画面全体の閲覧ヒントをトリガーします.以下のようになります.
このdemoはほとんど上の概要のいくつかの技術tipsに従って、完全なコードdemoのページにはすべてあって、難しくなくて、みんなは興味があって見てもいいです.
実際のプロジェクトでHTML 5フルスクリーンAPIを使用したい場合は、demoページに表示されるこの方法は少なくありません(今後N年以上のHTML 5の発展と互換性があります):
var runPrefixMethod = function(element, method) {
var usablePrefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (usablePrefixMethod) return;
if (prefix === "") {
// ，
method = method.slice(0,1).toLowerCase() + method.slice(1);
}
var typePrefixMethod = typeof element[prefix + method];
if (typePrefixMethod + "" !== "undefined") {
if (typePrefixMethod === "function") {
usablePrefixMethod = element[prefix + method]();
} else {
usablePrefixMethod = element[prefix + method];
}
}
});
return usablePrefixMethod;
};
メソッド実行(メソッドであれば)であり、プロパティ判断(プロパティがサポートされているかどうか)でもあり、実用的であり、直接コピーして貼り付けて使用することができます.
OK、ここで言ったこと、実は上のいくつかの参考文章はすべて言ったことがあって、面白くありません!今、目を下に移して、新鮮な空気を吸っています~~
三、FireFox/Chromeでの表示差異
表象の違い:表象の違いは、画面全体のヒントをサポートするかどうかの違いです.FireFoxブラウザは大きな枠です(上のスクリーンショットを参照).Chromeブラウザの下には実色の背景があります(下のスクリーンショットを参照):
ブラウザメーカーの好みは、何も言うことはありません.
より細かい違い:よく観察すると、フルスクリーン状態でFireFoxブラウザの下でインタフェースの任意の位置をクリックすると、正常な状態に戻る可能性があります.しかしChromeブラウザでは、画像をクリックしてこそ正常な状態に戻ることができます.次の2つの図は同じ位置で、マウスの手の形の違いを比較します.
深層の原因:demoページでは、背景はすべて全画面の黒で、画像の効果は同じで、高さは60%拡大表示で、垂直で水平に中央に位置していますが、その背後で実現するメカニズムはとても違います.
FireFoxブラウザは全画面要素のCSS属性の強い設定を行い、FireBugを開き、システムのデフォルトスタイルを表示します.
つまり、要素の幅が100%表示され、黒い背景、固定位置--これもFireFoxブラウザの下で画面の任意の位置をクリックすると、全画面が終了する理由です.イベントをバインドした全画面要素が満画面に表示されているからです.
背景色の非強設定は、以下のCSSで修正できます.
:-moz-full-screen {
background-color: #fff;
}結果として、次の図のようになります.
Chromeブラウザでは、デフォルトではフルスクリーン要素にもCSS設定がありますが、わずかです.
まあ、基本的には2つの醤油CSS設定で、背景色はまだ白いです.
今問題が来たの?なぜ2つのブラウザのデフォルトのフルスクリーンCSSスタイルが違うのか、しかし、すべて黒い背景で、画像は垂直に水平に中央に位置しています!!!
解釈:FireFoxブラウザの下の黒い背景は全画面要素であり、画像の中央揃えはCSSによって制御されている(:after擬似クラス生成要素+vertical-align:middleで実現されている).例えば
text-align:centerピクチャを削除すると水平に中央にならない.Chromeの黒い背景はシステムのもので、その全画面要素はブラウザにハイジャックされているようで、デフォルトでは永遠に画面が中央に表示されています(text-align:center画像を除いても水平に中央に表示されています)--通常のCSS理解から離れています--デフォルトのdisplay:block状態がdisplay:inline-blockになったようです.しかし、ChromeをFireFoxブラウザと同じように表現する方法はあります.FireFoxブラウザのデフォルトのスタイルを増やすことです.
:-webkit-full-screen {
background-color: black;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
}すると、このようにChromeブラウザの下でも、画面の任意の位置をクリックすると、全画面状態が終了します!
本住所:http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/