web-dev-qa-db-ja.com

ユーザーがモバイルデバイスから標準表示に切り替えることを可能にするStyleswitcherまたはthemeswitcher

私は自分のサイトのすべてのスタイルを単一のスタイルシートにまとめた（モバイルスタイルの定義に@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)を使って）、自分のサイトのモバイル版をCSSで作成しました。すべてが1つのスタイルシートに収まっていれば、うまくいきます。

しかし、モバイルデバイスからサイトを表示している場合でも、ユーザーが標準表示に戻ることを許可したいです。ユーザーが@mediaをオーバーライドできるようにする方法がわからないので、2つの選択肢があるようです。（1）スタイルシートとスタイルスイッチャースクリプトを分ける、または（2）テーマとテーマスイッチを分ける.

理論的にはこれはスタイルスイッチャーで可能になるはずですが、スタイルスイッチャーがヘッダーのメディア宣言をオーバーライドするようにする方法を理解することはできません。

それで、私はテーマスイッチャーを調べ始めました。私はモバイルユーザーを検出してデフォルトでモバイルテーマに誘導したいのですが、それでも望む場合はスイッチバックできるようにします。

これは本質的にはWP Mobile Packプラグインがすることですが、私が必要としない多くの追加機能を持っています、そしてそれがデータベースを変更する方法についていくつかの恐怖物語を読みました。私はすでにモバイル版に必要なCSSを書いているので、私はすべての事前に構築されたモバイルテーマも必要としません。

単純なテーマスイッチスクリプトとモバイル検出プラグインを組み合わせることで、ヘッダーにメディアクエリを定義する必要がないような、より軽量なソリューションをお勧めすることはできますか。

cssmobileswitch-theme
2
Sarah

モバイル/デスクトップを$ _SESSION変数で切り替えるだけでは十分ではないでしょうか。 "デスクトップリンクへの切り替え"に?switchtodesktop=1のようなものを含め、ヘッダーに次のようなものを含めるようにします。

session_start();
if ($_GET['switchtodesktop']) {
  $_SESSION['switchtodesktop'] = true;
}
$desktop = isset($_SESSION['switchtodesktop']);
[...]
if ($desktop) {
  // only desktop css without media queries
} else {
  // default stuff (media queries, like you have now ..)
}
1
Kelley van Evert

あなたがglobal $is_iphoneを使ってあなたがモバイル機器にいるかどうかを判断することができます。名前は気にしないでください。それは他のデバイスも捕まえます。

0
kaiser