生きているままでいる:スクリーン

5871 ワード
html api css javascript テキストリンク
金曜日の夜、私はおいしい菜食主義のボローニャを料理していました-しかし、私のiPhoneがスクリーンを調光していて、すぐにスクリーンをロックした後に悩んでいました.私は「ロックする時間」を変えることができます.設定では、それはスマートではない、我々は“滞在生きて”にWebページを伝えることができれば?
The Screen Wake Lock API 正確にそれをする-しかし、現時点では、クロムだけで.
それをテストするために、私は私のMacBookにクロムを使いました.
まず、私はTurn display off after to 1 min :

それから、WakeロックAPIをオン／オフするためのチェックボックスを追加しました.チェックボックスは隠されています、そして、それはアイコンとして示されるラベルです-交差した、右上の灰色の目:

それから、押されるとき、アイコンは開いた、緑の目に変わります:

を切り替えるためのJavaScriptコードScreen Wake Lock かなりまっすぐ進む
const wakeLockToggle = document.querySelector('[data-wake-lock] > input');
if (wakeLockToggle && ('wakeLock' in navigator)) {
  let wakeLock = null;
  const wakeLockEnable = async () => { 
    try {
      wakeLock = await navigator.wakeLock.request('screen');
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  }
  wakeLockToggle.addEventListener('click', () => {
    if (wakeLockToggle.checked) {
      wakeLockEnable();
    }
    else {
      wakeLock.release()
      .then(() => {
        wakeLock = null;
      });
    }
  })
}
次に、MacBookを開いて、何も触れなかった.
予想通り、1分後にスクリーンを調光した.それから私はScreen Wake Lock — そして3分後に画面が暗くなっていない.ああ!

デモ


残念ながら、CodepenはScreen Wake Lock API 機能方針のための読み込みから、しかし、私はデモをアップロードしましたhere!

ボーナス：構造化マークアップ


Googleの豊富なスニペットを使用して、SEOのボーナスですので、私はデモのレシピに追加しました.Googleの使用Rich Result Testing Tool , Googleが見るものをプレビューできます

--

右から左へ


使用するCSS Logical Properties を含むいくつかのスタイルborder-block-start-width , padding-inline-start and margin-block-end .
デモマークアップを確認する場合はltr to rtl 文書の上部に
<html lang="en-US" dir="ltr">
私は、レシピを持つサイトをScreen Wake Lock API !
読書ありがとう!
Pythonでプログラミング
python 3のhttp.serverを使って30秒でローカルwebサーバーを立てる