タグ

2018年11月27日のブックマーク (3件)

  • [CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法

    ビューポートを使った単位(vw, vhなど)は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか? サイトのナビゲーションやページコントロールはどうでしょうか? それらは計算に含まれますか? スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ(vh)の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ(vh)の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー

    [CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
  • lodash の debounce や throttle で簡単に負荷対策

    JavaScript を使っているなら lodash は大変便利なのですが、関数が多すぎてどれ使ったらいいのか解りづらいのが難点です。 ここではその中でも連続する呼び出しを無視してくれる debounce と throttle という負荷対策用の関数を紹介します。また、この2つの似た関数がどう違うのかも説明します。 連続する呼び出しを無視したい、とはどういうことか たとえば、mouse move イベントはマウスの座標が動くたびにすごい頻度で発生します。これに応じて画面を同期させたり、サーバに問い合わせしてしまうと大変なので一般的には0.2秒とかマウスが止まったら同期や問い合わせが走るように実装するかと思います。 別の例でいえば、textbox のインクリメンタルサーチ実装で、文字打つたびにサーバ問い合わせしたら大変なので、入力がある程度止まった時点で問い合わせするのが一般的です。 この処

    lodash の debounce や throttle で簡単に負荷対策
  • アドレスバー奮闘記 - 人民のためのフロントエンドブログ

    This domain has expired and is available on auction. If this is your domain, you can renew it. Search for any domain at Dynadot.com and build your website for free! nekokke.tech 2021 著作権. 不許複製 プライバシーポリシー