しばらくOSのアップデートは様子見しておこうかと思ってたのですが、色々面倒になったのでアップデートしました。
ぼちぼち巷の流行病みたいになってる(私の周りだけ?)iOS8でスマホサイトを閲覧したときにaタグで囲ってる画像にzoomが効かない件ですね。
参考サイト:
iOS8 Safariでzoomプロパティが無効になっている件
以前の会社でもそうだった気がしますが、Retinaディスプレイに対応させるために画像を2倍の大きさで書きだして、ベースとなるCSSに「zoom:0.5」を指定してるとこって多いんじゃないでしょうか。
上記のサイトさんでは「Safari」と書いてましたが「Chrome」で見ても効いてないみたいです。。
そんなわけで、暫定的になるのかもしれませんが、とりあえずの対処をしてみてます。
スポンサードリンク
私の場合「zoom:0.5」の指定はそのままに、対象となる画像のcss部分にzoom、width、heightを指定。
こんな感じ↓
//ここはそのまま img { zoom:0.5; } //対象となる画像の部分に追加してるCSS .inquiryBtn img { zoom:1; width:61px; /* 画像半分のサイズを指定 */ height:11px; /* 画像半分のサイズを指定 */ }
CSSで名前をつけてる箇所は上記の方法で良さげですが、場合によってはhtml修正しなければならなくなるかも。
ページ数多いと面倒な予感。。
テキストベースのサイトだとそこまでないのでしょうが、画像ガッツリのサイトだと場合によっては「ヒョ~!」って見た目になります。。
他に効率的な方法があればよいのですが…それ以前にiOSが対応してくれれば問題ないのですが…。。。