0

私は現在、特定のデバイスのユーザーを私の MediaWiki インストールのモバイル バージョンにリダイレクトする方法を考え出しています。ビューを手動で切り替えるために使用される組み込みのリンク ( MobileFrontend拡張機能によって提供される) は下部にありますが、小さくて見落としがちです。

最初に、PHP である種のユーザー エージェント文字列検出を行うことを検討しました (完全な開示: 完全な PHP noob )。まず、ページ上の他のものが送信される前にリダイレクトが発生しない限り、リダイレクトは機能しません。第 2 に、ユーザー エージェント スニッフィングはエラーが発生しやすいようです。そして 3 番目に、そもそも MediaWiki インストールにコードを挿入する方法や場所がわかりませんでした。ウィキペディアは Varnish を使用してモバイル ユーザーを検出しているようですが、私にはそのオプション (共有ホスティング) がなく、その使用方法もわかりません。

私が取り組んでいる 2 番目の現在の解決策は、Javascript を使用してユーザーをリダイレクトすることです。欠点は、デスクトップ ページとモバイル ページの 2 つのページをダウンロードする必要があることです。それはさておき、私はそれを正しく機能させるために多くの問題に遭遇しました。次のコードはすべてMediaWiki:Common.jsに配置され、ページが読み込まれるたびにすべてのユーザーに読み込まれます。

1)

if(document.URL.search("mobile") == -1)
{

  if(document.documentElement.clientWidth <= 735)
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

問題: 勝手にモバイル ビューに切り替えます。Nexus 7 で Chrome リモート デバッグを使用して幅を再確認しました。縦向きで 980 になることもあれば、601 になることもありました。601 が報告された場合、モバイル リダイレクトはトリガーされませんでしたが、デスクトップの Chrome/Firefox/IE で同じページを同じ幅で開くと、完全にリダイレクトされました。

jQuery を使用することは、明らかに同じ方法を使用して幅を決定するため、オプションのようには見えませんでした。

2)

if(document.URL.search("mobile") == -1)
{
  if( navigator.userAgent.match(/Android/i)
   || navigator.userAgent.match(/webOS/i)
   || navigator.userAgent.match(/iPhone/i)
   || navigator.userAgent.match(/iPod/i)
   || navigator.userAgent.match(/BlackBerry/i)
   || navigator.userAgent.match(/Windows Phone/i))
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

問題: これは実際には機能しますが (もちろん、存在しないユーザー エージェントはリダイレクトをトリガーしません)、問題は粒度です。たとえば、Galaxy Nexus または Nexus 7 ではモバイル ビューが必要ですが、Nexus 10 または Asus Transformer では必要ありません。

3) MobileDetect MediaWiki 拡張機能

問題: この拡張機能は 2010 年以降更新されていませんが、まだ正常に動作する可能性があります。それとは別に、PHP でモバイル デバイスを検出することは素晴らしいことですが、モバイル サイトで大規模なタブレット ユーザーにサービスを提供したくないという問題は依然として存在します。また、ばかげているように聞こえますが、モバイルスキンの名前が何であるか (またはそれがスキンであるかどうか)、または拡張機能がモバイルデバイスを検出した場合にモバイルビューに切り替える方法もわかりませんでした ( PHP リダイレクトを実行するには遅すぎる可能性があります)。

実験中にあちこちで少し微調整しましたが、中心的なアイデアは常に幅の検出またはユーザーエージェントのスニッフィングのいずれかでした. 幅を使用してユーザーをリダイレクトするのは素晴らしいことですが、非常に扱いにくいので信頼できません。携帯電話やタブレットにはデスクトップ バージョンが表示され、デスクトップ ブラウザにはモバイル バージョンしか表示されないという状況にさえなりました (これはdetectmobilebrowsers.comの機能によるものでした。Common から問題のコードを削除するためだけに Javascript を無効にする必要がありました)。 .js)。

携帯電話や小型タブレットのユーザーを Wiki のモバイル ビューにリダイレクトする、かなり簡単な方法が必要です。解決策の 1 つを間違えただけですか、それとも別の方法がありますか?

4

2 に答える 2

0

ユーザーエージェント方式を採用することにしました。太陽の下ですべてをキャッチできるわけではありませんが、サイトにアクセスする可能性のあるデバイスの大部分をキャッチする必要があります. コードは次のとおりです。

if(document.URL.search("mobile") == -1)
{
  var ua = navigator.userAgent;

  if(ua.match(/Android/i))
  {
    if(ua.match(/Mobile/i))
    {
      window.location.replace(document.URL + "?useformat=mobile");
    }
  }
  else if((/webos|iphone|ipod|blackberry|windows phone|bada/i).test(ua))
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

携帯電話にはモバイル ビューが表示され、タブレット、デスクトップ、およびその他のデバイスにはデスクトップ ビューが表示されます。携帯電話では 1 ページではなく 2 ページを読み込まなければならないという欠点はまだありますが、wiki は特にメディアを多用しているわけではありません。上記のコードは、Kindle Fire 上の Amazon の Silk ブラウザーのモバイル ビューも正しく捉えているように見えることに注意してください (こちらを参照)。

この質問には、モバイル ブラウザの検出に関する詳細が含まれており、この質問では、Android フォンとタブレットを区別する方法について説明しています。私の場合、確実に動作させることはできませんでしたが、この回答には、em ベースのメディア クエリを使用して電話、タブレット、およびデスクトップを区別する興味深い方法がありました。

于 2013-04-08T04:15:41.207 に答える