memo:スマホ対応コーディング

12月 18th, 2012

スマホ対応コーディングの仕事が増えてきた今日この頃、
できれば1ソースで済ませたい、そんなとき便利メモ

■CSS振り分け
正味、複雑なデザインだと1ソースだと再現しづらいのでせめてスマホ用CSSを読ませて対応させる。

・スマートフォン(縦長・横長)

<link rel=”stylesheet” href=”smartphone.css” media=”only screen and (min-device-width : 320px) and (max-device-width : 480px)”>

他にもiPad用とか振り分け方法がここに書いてます。

とりあえず、スマホ用縦横長に対応しておけばいいのかなと。

■背景画像の設定
スマホで縦長横長があるので背景画像を設定している場合、その背景画像の縦横どちらかリピートしていないと途中で切れちゃう、はみ出しちゃう可能性がありますよね。
そいいうときはCSSの「background-size」を仕様(CSS3)

詳しくはコチラ

 

いずれもhtml5+css3を基準としています。

 

[`evernote` not found]
このエントリーをはてなブックマークに追加

カテゴリー: web

Leave a comment

Leave a comment

Feed

http://www.browncrown.net/blog / memo:スマホ対応コーディング