Chrome のプレミアム タブレットではデスクトップ モードがデフォルトで有効になります

タブレットでのモバイルビューとパソコンビューのデモ。

Chrome は、プレミアム タブレットでデスクトップ モードをデフォルトで有効にすることで、Android タブレット エコシステムに適応しています。このブログ投稿では、デスクトップ モードの概要と、プレミアム タブレットで高品質のエクスペリエンスを提供するためにデベロッパーが知っておくべきことについて説明します。

ウェブサイトは、さまざまな画面サイズ、フォーム ファクタ、入力方法、デバイスの機能に対応する必要があります。ウェブ デベロッパーは、レスポンシブ デザインの手法を使用する代わりに、モバイル デバイスとデスクトップ デバイスで別々のウェブサイトを提供するために、ブラウザのユーザー エージェントを利用することがよくあります。

これまで、Android 版 Chrome のデフォルトのユーザー エージェントは mobile でした。このモードでは、パソコン向けに設計された(メタ ビューポートがない)サイトは、さまざまなスマートフォンの画面で見やすいように、980 ピクセルのデフォルトの固定仮想ビューポートを使用して表示されます。PC 版のサイトだけを読み込もうとする場合は(ユーザー エージェントに基づいて異なるバージョンのサイトがレンダリングされるため)、ユーザーはデスクトップ モードの設定を有効にしてユーザー エージェントをパソコン版に変更し、ビューポートを強制的に 980 ピクセルにできます。

Android タブレット エコシステムでは、より大画面で高性能なデバイスが手軽に利用できるようになり、パソコン用ウェブサイトの方がモバイルサイトよりも優れている場合が多くなっています。小さな画面と低い RAM 用に設計されたモバイルウェブサイトは、大画面やその他のデバイスの高度な機能を必ずしも活用しているとは限りません。そのため、プレミアム タブレットでは、パソコンモードがデフォルトになりました。

この変更により、デフォルトの User-Agent はデスクトップの User-Agent になり、ウィンドウの幅に一致するビューポートが使用されるようになります。デフォルトの仮想ビューポート サイズ 980 px は使用されません。

デスクトップ モードに関するデベロッパー向けの情報

Android の Chrome ユーザーは、デスクトップ モードの設定を変更して、デフォルトでパソコンサイトまたはモバイルサイトをリクエストできます。この点は変更されません。そのため、多くのユーザーはすでにモードの変更方法を把握しているはずです。

Android でパソコン画面のリクエストを表示したスクリーンショット。

プレミアム タブレット(10 インチ以上のディスプレイと 8 GB 以上の RAM を搭載したタブレット)では、デフォルトで PC 版サイトがリクエストされます。ウェブ デベロッパーは、タブレットのパソコンモードでウェブサイトが正常に動作することを確認する必要があります。

デフォルトでパソコンモードに変更されることで、Android タブレット ユーザーのほとんどのデフォルト ユーザー エージェントが、次のようなモバイル バージョンから変更されます。

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

次のように、パソコン版に切り替えます。

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

また、SEC-CH-UA-MODELSEC-CH-UA-PLATFORM の HTTP ヘッダーで「Google Pixel Tablet」と「Android」が報告されなくなり、代わりに「""」と「Linux」が報告されるようになります。

ウェブサイトでこの変更をテストする

プレミアム タブレットではデスクトップ モードがデフォルトになっているため、物理キーボード、タッチスクリーン、マウス、トラックパッドが接続されたユーザーでもないユーザーでも、PC 版サイトのすべての操作が問題なく動作することを確認する良い機会です。

Google アナリティクスなどで、ユーザーが Android を使用しているかどうかをユーザー エージェントに基づいて検出している場合は、この変更がサイトに影響する可能性があります。また、パソコン版 Chrome と Android 版 Chrome ではまったく同じウェブ プラットフォーム API を共有していないため、デバイス機能を使用する前に機能検出を使用することが重要です。

ユーザー エージェントに依存してユーザーにアプリのインストールを提示すると、誤って Linux バイナリのダウンロードを提示する可能性があります。related_applications プロパティとともにウェブアプリ マニフェストを使用することをおすすめします。これにより、Android 版 Chrome のデフォルト メカニズムを使用して、ユーザーにアプリのインストールを求めるメッセージが表示されます。

こちらの手順に沿ってデスクトップ モードを有効または無効にするか、Chrome DevTools のデバイス シミュレーションUser-Agent オーバーライドを使用してウェブサイトをテストできます。