タグ

Androidとcssに関するemj1025のブックマーク (4)

  • iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita

    ブラウザの表示領域に対して要素の位置を固定してくれるposition: fixed;は、表示領域が限られるスマートフォンでこそ使いどころがたくさんあるのだが、(特にAndroidで)バグが多くて実用にはまだまだ慎重にならざるを得ない。 今回は、iOSで遭遇したバグについて記述しておく。 症状 position: fixedを指定した要素がz-indexを無視する。 精確に説明すると、position: fixedを指定した要素が、表示領域外にある部分が、スクロールされて表示領域に入ってきたときに、スクロールされている間だけ、z-indexが無視されて、より大きなz-indexが指定されている(即ちより手前の)要素より前面に表示される。 実際のコードをご覧いただこう。 <div class="contents">ここに通常のコンテンツ</div> <div class="bg"></div>

    iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita
  • AndroidのChromeでフォントサイズが大きくなってしまう不具合は「max-height」で解決するかも | SEOモード

    AndroidChromeを使ってサイトを閲覧したときに、一部の文字が非常に大きく表示されることがあります。 ※確認した限りでは、Androidの「標準ブラウザ」では大丈夫だったので、おそらくChromeに固有のバグなのだと思います。 最初なぜこんなことが起こるのか分からなかったのですが、 色々調べた結果、意外とあっさりと解決しましたので、メモしておきます。 私の手元にある環境でしか調べられていないのですが、発生するのは、meta要素の「viewport」が設定されていないか、content属性の「width」が「width=760」のような数字になっている場合のようです。 <meta name="viewport" content="width=760">以下のキャプチャは、Google Chromeのエミュレータを使って、当ブログで再現したものですが、こんな風に非常に大きなフォント

    AndroidのChromeでフォントサイズが大きくなってしまう不具合は「max-height」で解決するかも | SEOモード
  • 一攫千金!宝くじ以外で人生一発逆転する方法。

    一攫千金を宝くじ以外で実現するには・・・よく紹介されている以下の方法のほとんどは、実は一獲千金には程遠いものです。 アフィリエイト → 個人が大きく稼げたのはアフィリエイトが広く普及する前の話。今は潤沢な資金のある法人・企業アフィリエイターが美味しいところを持って行っており、個人の新参者はニッチ市場を攻めるしかありません。しかし個人間の競争も年々激しくなっており、楽に大金を得るという意味である一攫千金の仕事とは言い難いです。この界隈では「ブログアフィリエイトは稼げる!」と謳って、情報弱者に役に立たないノウハウを売りつけるカモリエイターが跋扈していますが、彼らの稼ぎも昔に比べると減少傾向にあります。 情報販売 → 過去に詐欺まがいの商品が横行し、ユーザー離れで市場規模が縮小。現在は商品の低価格化も進み、一攫千金は至難の業です。 せどり・転売・輸出入ビジネス → 特別なスキルがなくても始めやす

    一攫千金!宝くじ以外で人生一発逆転する方法。
  • WebページをRetina対応させるテクニック~基礎知識編

    メディアクエリ―高精細ディスプレイに対応させるには -webkit-device-pixel-ratioについて 先のデバイスピクセル比(device pixel ratio)の項目でも解説しましたが、高精細ディスプレイ向けにCSSで対応するにはメディアクエリ(Media Queries)を使うわけですが、その際の条件式に用いられるのが、「-webkit-device-pixel-ratio」というものです。Retinaディスプレイ搭載のiOS端末を例に取ってみましょう。 Retinaディスプレイのデバイスピクセル比は「2」です。つまり、デバイスのピクセル密度の最低値が2の場合のみスタイルを適用するというメディアクエリを指定すれば良いわけです。 と、ここまで解説しておいて何ですが、この-webkit-device-pixel-ratioはもともと、アップルがRetinaディスプレイを開発し

    WebページをRetina対応させるテクニック~基礎知識編
    emj1025
    emj1025 2013/08/30
    Retina対応、ディスプレイ
  • 1