*

iOS8で閲覧すると、aタグがついてる画像にzoomプロパティが効いてない

   

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

 -Web

Sponsored link

Sponsored link

  関連記事

XAMPP(1.8.1)で複数サイトのドメイン管理をする(for windows7)

前やったのにまたやり方忘れました。 記憶力なんて、そんなものですね。。 主に「VirtualHostのサイト設定」と「h

no image

WordPressのURL変更などによる画像パスの一括置換

まずは、なにはともあれバックアップをとる。 1)プラグインをダウンロードする Search Regex 2)ダウンロード

CSSでborderにグラデーションを使って、よくある見出しを作る

borderにグラーデーションって、あまり使い勝手がない気もしますが、たまたま見出しとかに使ってみる機会があったのでやっ

ロリポップのプラン名が「チカッパ」から「スタンダード」に変わってた

今日ふらっとサーバーの契約状況を確認したら、いつの間にやらロリポのプラン名が変更されてました。 どうやら変更したばっかり

GoogleとYahoo!の電話コンバージョンタグの設定、番号が複数ならクリックイベントも設定

設定したことなかったので、電話コンバージョンタグの設定をメモっておきます。 ※タグの取得についてはやってないので、他の方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ