Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › viewportの設定を変更したい
-
投稿者投稿
-
-
2015年4月12日 5:23 PM #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のフォーラムでスマートフォンからフォームにコメントを入力する際に、フォームが横に大きく広がらないようにしたいのです。
よろしくお願いします! -
2015年4月12日 6:18 PM #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にあります。子テーマに移植したりするようにして、親テーマアップデートの際に設定が消えないように注意して下さい。
-
2015年4月12日 7:13 PM #25681
わいひらキーマスター直接書き換えるには、header-css-mobile-responsive.phpテンプレートを変更するしかないかもしれません。
>hidekichiさん
よしはむさんのサイトへは、こちらから行けます。
-
2015年4月12日 7:57 PM #25685
よしはむ
ゲストどうもありがとうございます!
もう一つ質問させていただきたいのですが、PC版のbbPressのフォーラムで、スマートフォン版と同じように、名前とアバターの下にテキストを回りこませるには、どのようにしたら良いでしょうか? -
2015年4月12日 8:23 PM #25686
わいひらキーマスターデベロッパーツールなどでスマホ版の設定を見て、同様の設定をstyle.cssに書き込めばOKです。
パソコンのChrome、Firefox、IE11、Safari、Operaブラウザでスマホ表示の動作確認をする方法
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方あと、出来れば新たな質問は、新しいトピックでしていただけると幸いです。(同様の問題を解決したいサイト内検索ユーザーにタイトルで内容がわかるようにしたいので。)
-
2015年4月12日 10:27 PM #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%表示なのでスマホの画面からはみ出すことがありえます。
ありがちなのがレス(返信)を付けた時などのリスト表示などでしょうか。 -
2015年4月13日 11:21 AM #25702
よしはむ
ゲストどうもありがとうございます!
こちらも解決できました!
次回からは新しいスレッドを建てさせていただきます。 -
2015年4月13日 4:31 PM #25709
わいひらキーマスターhidekichiさんありがとうございます。
よしはむさんもご協力ありがとうございます。
-
-
投稿者投稿
- トピック「viewportの設定を変更したい」には新しい返信をつけることはできません。