twentytenをスマートフォンで見た時の幅

  • 解決済 ishikoro

    (@ishikoro)


    11年、 9ヶ月前

    お世話になります。

    テーマ、twentytenのwidthを広げたく思い、940pxから960pxに広げました。

    PC上では、正しく広がり、中心に表示されているのですが、スマートフォンで確認した所、右側が画面より切れて表示されてしまいます。

    このような場合、きちんとスマートフォンでも端から端まで表示させるにはどこをいじればいいのでしょうか？

    ご教授よろしくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • takuword

    (@takuword)

    11年、 9ヶ月前

    @media属性を使って、960px以上の画面には幅960pxを適用し、959px以下の画面には940pxを適用するようにすればいいと思います。つまりレスポンシブデザインにするといいってことです。
    以下、サンプルです。

    @media screen and (min-width:960px) and (max-width: 9999px) {
/*twentytenの書き換えた設定*/
}
@media screen and (min-width:1px) and (max-width: 959px){
/*twentytenの設定*/
}

    それから、htmlのviewportも設定必須です。
    <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=8" />
    をヘッダに追加して下さい。

    トピック投稿者 ishikoro

    (@ishikoro)

    11年、 9ヶ月前

    ご教授ありがとうございます。

    そうするしかないのですね。

    どのような仕組みでスマートフォンでみたときは940pxに固定されているのか不思議です。

    とにもかくにもそれで対応したいと思います！

    どうもありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「twentytenをスマートフォンで見た時の幅」には新たに返信することはできません。