iOS8からはzoomが効かない
今から2〜3年前、スマホサイトのRetinaディスプレイ対応をしなければならなくなった時に、予算とかスケジュールの都合で簡易対応として以下のようなコードで強制的に全部のimg画像を1/2表示にして作っていた時期がありました。
img{zoom:0.5;}
この方法だと、img要素にいちいち1/2サイズを指定しなくても勝手に1/2サイズで表示してくれるので、レスポンシブではないスマホ専用サイトでリキッドレイアウトにする時非常に重宝していたのですが、、どうやらiOS8でzoomがサポートされなくなったてしまったようです。（涙）
zoom:0.5が効かなくなったiOS8では、原寸で320pxを超えるサイズの画像があると、こんな感じで画面からはみ出して表示されてしまいます。
iOS8がリリースされて立て続けに３件ほど、これが原因の修正依頼が入ってしまい、ちょっと慌ててしまいました。
対処方法
もともとどんな作り方をしているかによって違いは出てくるでしょうが、私の場合は以下の様な方法で対処することで何とか事なきを得ました。
１．img{zoom:0.5;}を削除
２．img{max-width:100%;height:auto;}を追加
３．ページを確認して画面サイズより小さいサイズで固定する必要がある箇所をピックアップ
４．CSSで該当箇所のwidth（またはheight）を1/2に設定
4の部分は、親要素にclassとかがついてないと特定できないので、HTML側にclassを追加するか、いっそ直接width/heightを指定するかなどの対処が必要になってきます。手作業で更新しているサイトならいいですが、システム化されててHTMLがバラバラにされていたりするとこの辺りの対処がかなり面倒なことになってくることが予想されます。（実際私の担当する案件でも２〜３箇所はどうしようもなくてシステム側でコードいじってもらいました）
初めから面倒くさがらずに固定サイズにしたい画像はwidth/heightに1/2した数値入れておけばよかったのですが、今更言っても仕方ないですね。。。皆様の中でもし過去にzoomで1/2する手法を使った覚えがある方がいらしたら、早急に対策を取ったほうが良いと思いますよ。
ではまたいつか…！
