viewportの設定を変更したい

7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #25677
      よしはむ
      ゲスト

      お世話になっております。
      viewportをスマフォユーザーが画面の大きさを変更できないような以下の様な設定にしたいのですが、どのようにしたらよろしいでしょうか?

      <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>

      bbPressのフォーラムでスマートフォンからフォームにコメントを入力する際に、フォームが横に大きく広がらないようにしたいのです。
      よろしくお願いします!

    • #25678
      hidekichi
      ゲスト

      >viewportをスマフォユーザーが画面の大きさを変更できないような以下の様な設定にしたいのですが、

      Googleでは、「minimum-scale、maximum-scale、user-scalable を避ける」のが推奨されています。
      ビューポートを設定する

      これはなるべくレスポンシブに対応するためですが、実際の意味合いとしてはスマホやタブレットは色んな画面サイズがあって、サイズを固定するとユーザビリティの低下が懸念されるからだろうと思います。

      >bbPressのフォーラムでスマートフォンからフォームにコメントを入力する際に、
      >フォームが横に大きく広がらないようにしたいのです。

      つまりはフォームが横に広がって画面からはみ出すのが問題という感じであれば、メディアクエリや、レスポンシブなフォームの幅の設定をすれば良いのかも知れません。
      例えば、max-widthをpxではなく文字数で設定したり(※1)、flex-boxを利用して自動でサイズを調整するというような方法です。これらはcssの話なんですけれども。

      ※1 mediaクエリで、@media screen and(max-width: 50em){…何かしらのcss…}と言うような感じです。これならば基本の文字数の何個分みたいな感じで設定できるので案外便利です。
      基本文字が16pxであれば、50*16pxで、800px以下のサイズと言う感じで指定できます。まぁ色々とあるかもしれませんが、これで例えば画面幅が50em以下の時、目的のフォームのmax-widthを20emとかにしておけば、横幅は320pxとかになり、20文字分しかないわけですからiphone5あたりもイケるだろうと思います。で、フォーム自体(あるいは、それを囲んでるブロック)をmargin: 0 auto;とかにしておけばセンタリングできるように思います(無くても良いですし、paddingでもよいです。デザイン次第です)。

      max-widthですから、最大幅が数値になり、それ以下の時はwidth:100%とかにしておけば画面に合うのではないかと思うんですけれども、どうでしょう?

      参考サイト: Creating a Mobile-First Responsive Web Design(html5 rocks:英語)

      公開されているサイトのアドレスを書き込んでもらえれば、どこをどのようにするかを具体的にアドバイスできるかも知れません。

      bbpressのCSSは 親テーマ/css/other.cssにあります。子テーマに移植したりするようにして、親テーマアップデートの際に設定が消えないように注意して下さい。

    • #25681
      アバター画像わいひら
      キーマスター

      直接書き換えるには、header-css-mobile-responsive.phpテンプレートを変更するしかないかもしれません。

      >hidekichiさん

      よしはむさんのサイトへは、こちらから行けます。

      トピック: 「bbPress」を使った場合のスマフォ版広告
      トピック: bbPressの表示の不具合報告

    • #25685
      よしはむ
      ゲスト

      どうもありがとうございます!
      もう一つ質問させていただきたいのですが、PC版のbbPressのフォーラムで、スマートフォン版と同じように、名前とアバターの下にテキストを回りこませるには、どのようにしたら良いでしょうか?

    • #25686
      アバター画像わいひら
      キーマスター

      デベロッパーツールなどでスマホ版の設定を見て、同様の設定をstyle.cssに書き込めばOKです。

      パソコンのChrome、Firefox、IE11、Safari、Operaブラウザでスマホ表示の動作確認をする方法
      WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

      あと、出来れば新たな質問は、新しいトピックでしていただけると幸いです。(同様の問題を解決したいサイト内検索ユーザーにタイトルで内容がわかるようにしたいので。)

    • #25690
      hidekichi
      ゲスト

      今しがたサイトを見せて頂き、色々試してみたのですが、フォームに何かしら入力する際に横に広がってしまう場合というのはどう言う時でしょうか?
      再現できなかったので、どのようにすれば横に広がってしまったかを教えてもらえると助かります。

      ちなみに、最新のバージョンでは専用のcss(bbpress.css[以下該当部分は750行あたり])があるみたいですね。

      #bbpress-forums div.wp-editor-container {
        margin: 0 auto;
        padding: 0;
        line-height: 0;
        max-width: 40em;
        width: 100%;
      }

      上記はコメントの入力フォーム(textarea)を囲むコンテナ部分です。textareaはwidth:100%なのでコンテナサイズにあわせて拡大縮小すると思うのです。
      はみ出すということは、コンテナが広がるということだろうと思うので、コンテナを40em(baseFontSizeが16pxだとして、16*40=640px)で設定してそれ以上広がらないようにしてみました。640px以下の時はwidthは100%でその時の画面幅となります。
      40emは、サムスンGalaxy nexusあたりの縦サイズです。横向きにした時サムスンGalaxy nexusまでは100%横幅表示になるかなぁと思います。縦向きで見る場合はこれまでと変わらないと思います。
      iPhone5は320x568pxなので問題なく100%表示になりますので、これまでと変わりません。それ以上の表示の場合(タブレットやPC)は、本来の100%表示よりは小さくなると思いますが、コンテナがセンタリングされているのでまぁ大丈夫かと思います。max-widthを50emぐらいにしても良いかも知れません。

      と、ひとまずわかる範囲で書いてみました。

      またmargin:0の部分に、autoを加えて左右のマージンを均等に取ることにより640px以上の場合はセンタリングして表示するようにしました。

      もしこれで該当部分が広がるとすれば、他に幅を押しやっている何かしらの要素があるということだろうと思います。それらが今度は#mainの部分(記事を囲んでいるブロック)に入っていて、更にその親である#containerや#body-in、#bodyを押しやっているような場合、widthが100%表示なのでスマホの画面からはみ出すことがありえます。
      ありがちなのがレス(返信)を付けた時などのリスト表示などでしょうか。

    • #25702
      よしはむ
      ゲスト

      どうもありがとうございます!
      こちらも解決できました!
      次回からは新しいスレッドを建てさせていただきます。

    • #25709
      アバター画像わいひら
      キーマスター

      hidekichiさんありがとうございます。

      よしはむさんもご協力ありがとうございます。

7件の返信スレッドを表示中
  • トピック「viewportの設定を変更したい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)