BLOG 2019.03.08
iPhoneの罠

伊藤

# SNS運用

こんにちは。
AIコミュニケーションの伊藤です。

3月になりましたが今年の花粉のすごいこと……。
社内は阿鼻叫喚です。

しかしスギの木なんて山にいかないと生えてこないのに、ここ栄までガンガンに届いているという事実が恐ろしいものです……。

さて、本日はiOS……そう、iPhone等を対象にしてコーディングするときに気を付けたい部分をお話しします。
転ばぬ先の杖としてお楽しみいただければ幸いです。

①background-position:fiexedが効かない

簡単に視差効果（パララックス）を使用できるCSSプロパティであるbackground-position:fixed;。
大きい写真を用いたウェブサイトでは迫力が出るので、かなり使いたくなるプロパティです。
しかし、これ……。
iPhoneに対応していないんです。

日本ではスマートフォン対応＝iPhone対応みたいなところがあるので、スマートフォンから多くみられるサイトを作るときには避けたほうがよさそうです。
これに対する対処法も色々あるのですが、ちょっとぎこちなくなっちゃうところがあります。
できない要望を飲んでしまわないように、覚えておきたい点です。

②完全なモーダルウィンドウの実装は難しい

PC以上にスマートフォンで真価を発揮する演出としておなじみ（？）のモーダルウィンドウ。
検索すると色々とサンプルを見つけることができ、jQueryのプラグイン等も多いので実装も簡単です。
しかし、モーダルウィンドウには落とし穴があり、背景がスクロールしないモーダルウィンドウを作ることは非常に難しいのです。

それを実現してしまうような方法もあるにはあるのですが、iPhoneで壁になるのは画面下部に表示されるメニュー。
これ全体に高さ計算が行われてしまうため、閲覧者ががんばってしまうとどうしてもスクロールしてしまいます。
もしこのような希望があった場合は、事前に話しておいたほうがいいかもしれません。