タブレット閲覧時にPC表示からスマホ表示に切替ボタン

Facebookの埋め込みタグが正常動作しない ← このトピックの最後に動的にview portを変更するサンプルを書いてあります。

それをいじくったらできないでしょうか？
もしPC表示がview portのwidth=1280なら、width=device-widthになればモバイル表示になるかと思うんですけれども。もちろんそのままだとタブレットのスタイルで表示されますので、view-portを例えば480、もしかしたらheightも必要かも知れませんが、その様な状態にしたら画面サイズは480pxかと思うのでその時のcssが動作するように思います。試してないですが(笑)

ちなみにスマホ時、PC表示<->モバイル表示はデベロッパーツール上で確認してます。
今回はタブレットを用いてなので上手く動作する保証はありませんが…。

例えばwordpressのカスタマイザーも表示が変わりますよね？なので何かしら方法はあると思うんですよ。
次期wordpressはカスタマイザー表示時に端末サイズの切り替えボタンがつくらしいので、方法はあるはずです。

ありがとうございます。
やってみましたが、これだと、次のページ、記事に移るたびにPC表示に戻ったり、下の方の表示が乱れたりします。
毎ページ毎にユーザーが手でピンチズームしたり、ダブルタップして拡大表示する手間と変わらない。
一度設定変更したらリロードされて、次のページに移っても設定がもどらないといいのですが。

実際にタブレットで見るのと、デベロッパーツール上で見るのとは鼓動が違うこと多いです。

それと、自分のサイトをタブレットでPC表示してみると両サイドの余白が無駄だとずっと感じていました。やっとどうにかする作業にとりかかって、viewport のwidth=1073 に変更しています。サイドバーが表示されるだけの横幅があれば十分かなと。Nexus7、8インチぐらいのタブレットの大きさだと。

<meta name=”viewport” content=”width=1073, maximum-scale=2.0, user-scalable=yes”>

> 次のページ、記事に移るたびにPC表示に戻ったり

ajaxを利用しているわけでなく、新しいページになったらすべてが新しく読み込まれるのでこれは動作的には当たり前の動作です。viewが切り替わるなら(ここが一番の問題だったわけです)、それを維持できる仕組みが必要ですが、例えばローカルストレージ(webストレージ)というものがあります。簡単に言えばcookieみたいなものです。

> 実際にタブレットで見るのと、デベロッパーツール上で見るのとは鼓動(挙動)が違うこと多いです。

いえ、viewが変わったならそれが正しい挙動です。以前の質問でもその時にどうなっているかを確かめたいという質問で、切り替えた後はずっとその表示にしておきたいというものではなかったので。デベロッパーツール上でviewは変わったけれども実機で変わるかどうかは不明というのが僕が危惧していた点です。

viewが切り替わるのが問題ないなら、それを維持できるようにローカル(セッション)ストレージに値を発行して、それがある間は、その値を読み込むということで解決できます。セッションストレージの場合、ウィンドウ・タブを閉じるまで有効で、ローカルの場合は永続的に保存できます。この場合、オリジン単位で保存できます。
つまり、プロトコル://ドメイン名:ポート番号です。

追加するスクリプトの流れとしては、リンクをクリックした時、設定する値が存在するかどうかを調べて、無ければ新しくセット。
もしある場合は、その値がどの値なのかを調べて、その時の値と比較します。

別途document.readyの時に、値を調べる仕組みを作って、値がある場合はそれで書き換えるという事をします。

jQueryやjavascriptでやる場合はこうですが、もちろんphpでもできます。
ただしその場合は、view portの値を書き換える部分が条件付きとなるため、親テーマに手を入れることになりアップデートの度に修正しなくてはいけません。親テーマがこれらを実装したら別の話です。

方法としては、set_transient(); 等を利用するかcookieを発行するかです。ローカルストレージもphpでできますが、ページの遷移が必ず必要になるのでそこらをどうするかが問題ですね。

方法的に一旦変更した表示を維持するというのはできないことではないですが、切り替えると言う場合は色々と手段を考えないといけないので、それを実装するかどうかはわいひらさん次第です。

viewを切り替えるメリットとしてどういうことがあるかを、もう少し押したほうがいいでしょうか。
普通は切り替える必要はなく、デバイスのサイズで表示したら良いだけのことですから、どんなメリットがあって有用かを例をあげてもらえると助かります。

> 下の方の表示が乱れたりします。

これが気になりますね。どういう状況かをスクリーンショットに撮ってもらえると何かの参考になるかも。

> 自分のサイトをタブレットでPC表示してみると両サイドの余白が無駄だとずっと感じていました。

これはtabuleさんのタブレットはそうかも知れませんが、タブレットにも種類があって表示領域はそれぞれに異なります。余白を詰めるというのは本来絶対値で行わず、viewportで言えばdevice-widthでその端末に合う表示を自動で設定するべきなのです。そしてcssでデザインという感じですね。
そのためにはメディアクエリやブラウザ・osの判断が必要になるかと思います。

そもそもタブレットというのは本当に難しいんですよ。PC表示並のものあれば、実際はモバイルデバイスなので。
結局デフォルトのデザインがPC用に設計されているのが問題だと思うので、何かしらデザインでタブレットとPCどちらもいけるようなものができないかを、実はちょっと前から考えています。スキンでjavascriptが含められるようになったので。

ただもうしばらく時間は掛かりそうです。

> 下の方の表示が乱れたりします。

というのは、PC表示→モバイル表示 でスクロール追随バーが下に移動して配置されるために、他と重なって表示されるてグニャグニャになるようです。

＞ viewを切り替えるメリットとしてどういうことがあるかを、もう少し押したほうがいいでしょうか。

サイト制作者としては、タブレット愛好者に対して、第一次的には、PC表示で全体の外観構成を見てもらいたい。
次に記事の本文の文字や画像が小さいと感じる人に対しては、モバイル表示に切り替える選択肢を与えたい。
次々に記事を読み進める人に対しては何度もモバイル表示に切り替えたり、ピンチアウトの手間をかけさせたくない。
というわけなんですが。

viewport を 1280 から width=1073 にした今では、 サイドバー付きでも Xperia Z3 Tablet Compact (8インチ) で見ても文字はほどほどの大きさになりましたが。記事本文だけナビゲートする人はやっぱり半固定的にモバイル表示に切り替える選択肢がほしいところです。

Android chrome ブラウザー のメニューに 「PC 版サイトを見る」というのがありますが、「スマホ版サイトを見る」というのもあればよいのですが。
サイト制作者が Simplicity2 のカスタマイザーで「タブレットはモバイル表示」にチェックを入れていない場合には、タブレット訪問者はPC表示からモバイル表示に移行することが不可能になるという問題が発生します。

サンプル: viewportを動的に変更する | セッションストレージ対応版

文字やらの表示はアレですが、前回のものをセッションストレージに対応するサンプルをやっつけで書いてみました。

> PC表示→モバイル表示 でスクロール追随バーが下に
> 移動して配置されるために、他と重なって表示される
> てグニャグニャになるようです。

あぁデフォルトのスクロール追従は色々とある部分なので、そこらは今後の課題ですね。

> 次々に記事を読み進める人に対しては何度も
> モバイル表示に切り替えたり、ピンチアウトの手間を
> かけさせたくない。

ここらは、つまりモバイル表示時に次のページや前のページに戻るための手段として全体を表示してサックリと言うことなんだろうと思います。つまりは、モバイルページでもすぐに前後ページに行ける手段があれば良いということですよね？

モバイル端末でサイドバーを表示するにあたってviewportを絶対値(px)で表示するとどうしても文字が小さくなってしまうというのは、サイドバーとメインのカラムが横に並んでいる事に起因していると思うんですよ。

スワイプでカラム間を移動できるならいざ知らず、メインとサイドバーを別物にするとクリックを手間と感じてしまうのでできれば横にある方が良いというのもわかるんです。ここらのデザインですよね。