Galaxy、Xperiaのbackground-sizeの設定について

2015/8/31更新

CSS3より追加されたプロパティbackground-sizeを使えば背景画像のサイズを簡単にリサイズすることができます。例えばiPhoneのsafariなどでは解像度が高くなったので通常の画像サイズの2倍のサイズを用意する必要があります。

解像度

これは背景画像も同じです。
普通の画像サイズで背景画像を設定してiPhoneなどで見ると汚く見えてしまいます。

ただこのbackground-size、GalaxyやXperiaではそのまま書いても効かないことがあるようです(理由はちょっとわかりませんが)
それでどうやら-webkit-系の書き方をするとうまく表示されるようです。

今までずっとiPhone系でしかちゃんと見れてなかったので、けっこう盲点でした。ちなみにbackground-colorも一緒に設定されている場合はこちらも消えてしまう場合があるようです。

CSS3は便利なんですけど、こういうブラウザ依存系が増えるのも困りものですね〜

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

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

CAPTCHA


トラックバック:https://recost-design.com/1613.html/trackback