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

タブレットでのモバイル表示とパソコン表示のデモ

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

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

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

Android タブレットのエコシステムでは、より大型で高性能なデバイスが普及するにつれ、多くの場合、モバイルサイトよりもパソコン向けウェブサイトの方がユーザー エクスペリエンスに優れていることがわかりました。小画面と低 RAM 向けに設計されたモバイルサイトでは、大画面やその他の強力なデバイス機能を必ずしも活用できるとは限りません。そのため、プレミアム タブレットではデスクトップ モードがデフォルトです。

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

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

Android 版 Chrome をご利用の場合は、デスクトップ モードの設定を変更して、デフォルトでパソコンサイトまたはモバイルサイトをリクエストできます。モードの変更方法に変更はなく、すでに多くのユーザーがモードの変更方法に慣れているはずです。

Android での PC 画面のリクエストのスクリーンショット。

プレミアム タブレット(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

次のように、PC 版に変換できます。

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

また、HTTP ヘッダー SEC-CH-UA-MODELSEC-CH-UA-PLATFORM で「Google Pixel Tablet」と「Android」がレポートされなくなります。代わりに、それぞれ「」と「Linux」がレポートされます。

この変更についてウェブサイトをテストする

プレミアム タブレットではデスクトップ モードがデフォルトになるため、物理的なキーボード、タッチスクリーン、マウス、トラックパッドの有無にかかわらず、サイトの PC 版でのすべての操作が問題なく動作することを確認してください。

ユーザーが Android を使用しているかどうかを検出するためにユーザー エージェントを使用している場合は、Google アナリティクスなどでこの変更がサイトに影響を及ぼす可能性があります。また、パソコン用 Chrome と Android 版 Chrome では、まったく同じ Web Platform API がすべて共有されるわけではありません。そのため、デバイスの機能を使用する前に機能検出機能を使用することが重要です。

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

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