忍者ブログ
音楽同人サークル『Magicberry Fields』のブログです。 ニコ動マイリスト→http://www.nicovideo.jp/mylist/5662950
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ホームページをスマホ対応させました。
http://magicberry.nobody.jp/

考えなければいけないのは、
・画面サイズ
・PCサイトとの関係
でしょうか。

1.画面サイズ
ウチのページ&ブログの4ヶ月間の解析結果を見ると。

320×568px iPhone5 56回
375×667px iPhone6 29回
360×592px android系 18回
320×480px iPhone4など 11回
360×640px android系 11回
414×736px iPhone6Plus 2回

と、見事にバラバラですが、横幅は、320pxを最低値と考えれば問題なさそうです。
これより大きい場合も考慮して、サイズを固定せず

width:100%;

のように指定することにします。


2.PCサイトとの関係
一昔前はPCサイトとケータイサイトを別にするのが主流でしたが。
はっきりいって、両方修正するの面倒くさい。
なので、PCサイトとケータイサイトを、共通のひとつのコードで表示できるようにします。
いろいろ模索した結果、単純に幅が一定値以下だったら、動的にレイアウトが変わるようにしました。

ここで使えるのが@media。
ブラウザのサイズなどの条件で、場合分けして書くことができます。
後は、displayでレイアウトを変えたり、表示・非表示を切り替えたらうまくいきました。
cssのコードはこんな感じ。



/* スマホ・PC共通の記述 */
div.main
{
    width:100%;
}

div.menu
{
    display: block;            /* ブロック表示でメニューを上に表示 */
    width:100%;               /* 横幅めいっぱい表示 */
}

/* 右列 */
div.right
{
    display: none;    /* 非表示 */
}

/* PC用ページ */
@media all and (min-width: 960px) {
    /* 横幅が960px以上だったら */
    div.main
    {
        width:950;
    }

    div.menu
    {
        display:inline-block;        /* インラインブロックでメニューを左に表示 */
        width:130px;
    }

    /* 右列 */
    div.right
    {
        display:inline-block;        /* インラインブロックで表示 */
    }
}

メリットは、PC上で動作確認ができること。
ブラウザの横幅小さくするだけで、スマホ向けの表示に切り替わります。
デメリットは古いブラウザが対応してないこと。
未確認ですが、おそらく、古いブラウザだと@media内の記述が無視されて、PCでもスマホ向けのサイトだけが表示されるかと。
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
TO DO
(整理中)
スケジュール
10/30 M3-2011秋
カレンダー
05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
最新コメント
[02/03 ゆーしす]
[02/02 あきる]
[12/30 職人]
[12/27 あきる]
[12/22 あきる]
最新トラックバック
ブログ内検索
カウンター
アクセス解析

Copyright © [ Magicberry Fields - Webログ ] All rights reserved.
Special Template : 忍者ブログ de テンプレート and ブログアクセスアップ
Special Thanks : 忍者ブログ
Commercial message : [PR]