iphone
しばらく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が対応してくれれば問題ないのですが…。。。