iPhone、iPadに同じデザインで対応する

CSSだけでいろんな解像度のデバイス(スマートフォンやモバイルPC)に対応してみる。

 

wordpressには

それ用のプラグイン(wptouchとか)もあり、とても便利に使わせていただいているけど

なんか物足りない感が・・・

 

それはなんぞや?と聞かれると

 

「う~ん、、、」となってしまうのだけど

やっぱり、パソコンで見た時とそうでない時の差。

としか言いようがないかも。

 

で、冒頭の

「CSSだけで

いろんな解像度のデバイス(スマートフォンやモバイルPC)に対応してみる。」

 

EX:スタイルシート内に直で書く場合

@media screen and (max-width: 480px) {}

最大幅が480px(iPhoneなど)の場合・・・という具合。

 

パソコン用

 

パソコン用。

 

最大780px、iPad縦

iPad縦

スマホ等横向き

 

スマホ等横向き

スマホ等縦向き

スマホ等縦向き

iPhone向きにはトップへ戻るボタンとか

ツィッターとRSSのでかいボタンは非表示。

 

すごく快適になったけど、

これまでつくったサイトはなかなか手を付けられず、

WPtouch Proを購入しようかどうか検討中。

いや~~、カネかかる~   ┐( ̄ヘ ̄)┌ ・・・

 

One comment Add yours

コメントを残す

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

CAPTCHA