karakaram-blog

[WordPress] TwentyTwelveのNexus7での表示をスマホと同じにする

 ツイート 0  シェア 0  Google+1 0  Hatena 1

wordpress

WordPress の TwentyTwelve テーマを Nexus7 で表示すると、PC と同じようにサイドバーが表示されます。Nexus7 は横幅がそれほど広くないので、サイドバーがあるとサイト全体が窮屈な印象を受けます。スマホで表示したときと同じように本文だけを表示したほうが読みやすいと思ったので調べてみたところ、海外サイトに手順が載っていたので紹介します。

目次

  1. style.css の @media screen を 810px に変更する
  2. iPad もスマホ版で表示したい場合

style.css の @media screen を 810px に変更する

style.css の @media screen and (min-width: 600px) を 600px から 810px に変更します。

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

↓

/* Minimum width of 600 pixels. */
@media screen and (min-width: 810px) {

参考サイト
Twenty Twelve how to unify mobile look?

iPad もスマホ版で表示したい場合

iPad もスマホ版で表示したい場合は、上記の min-width をさらに大きな値に調整すれば可能かと思います。お試しください。

 ツイート 0  シェア 0  Google+1 0  Hatena 1