cosoa-b

八百屋にサンマは頼まねえ

スマホでのbackground-attachment応急処置

jquery

Posted on

あんまググっても出ないんですけど、どうにかならないんすかね。

全画面背景表示を実装しているといつも躓くのがスマホでの対応。
ただ背景に固定するだけなら空のdivを作ってposition:fixed;させればいんだけど、パララックスと一緒に使うとなるとそうもいかないです。

どこまでもcoverする画像

first-aid-to-background-attachment1.jpg
どんなサイズなんだ。。。

結局、スマホではbackground-attachmentを効かせないという方向で落ち着きました。パララックスちゃんと見たい人はPCから。ごめん!ってことで。

userAgentで判別するだけ

#hoge{
    background-attachment:fixed;
    background-size:cover;
};
 var agent = navigator.userAgent;
 if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/Android/) != -1)
{$('#hoge').css("background-attachment","scroll");}

やはり、パララックスはPCでのイベント的利用が主でしょうね。小さい画面で見ても最大限良さが伝わらない。どうしてもスクロールは指でするわけで画面が隠れてしまいますしね…。ほどほどにということです。

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法
こもりまさあき
エムディエヌコーポレーション
売り上げランキング: 101,547