Chromeの「デスクトップサイトのリクエスト」オプションはどのように機能しますか?


94

iOSのgoogle chromeの場合、ユーザーが[デスクトップサイトをリクエスト]ボタンをクリックすると、ブラウザはデスクトップサイトを表示するために何をしますか?サイトが探しているリクエストのヘッダーのようなもの、または似たようなものを想像しますか?

回答:


64

唯一の違いはUser-Agent:リクエストのヘッダーだと思います。

AndroidデバイスのChromeから送信されるUser-Agentヘッダーは次のとおりです。

Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

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

最初の1つにある「モバイル」という単語と、Androidシステムとデバイスについての言及にも注目してください。これらを確認すると、デスクトップLinuxバージョンのクロム。


14
別のヘッダーは素晴らしいでしょう。ユーザーエージェントのスニッフィングはとても恐ろしいです。
Mu Mind

10
同意する。一部のサイトで実装されている自動検出とリダイレクトは、非常に非生産的で悪化する場合があります。
dsh

5
より良いソリューションは、デバイスのサイズ、インターフェイス、および機能を検出することです。CSSメディアクエリは正しい方向への一歩です。
ブラッド

1
この機能は、単純なUAスイッチと更新では実装されません。問題の真実は、デスクトップUA文字列がロードされた場合、ほとんどのモバイルサイトはデスクトップに戻らないということです。それでは、Safariは元のリクエストを使用しますか?いいえ。最初にモバイルサイトのURLを入力しても機能するようです。モバイルバージョンの名前は決して標準化されていないため、その実装方法はわかりませんが、単純なUAの変更よりも賢い方法がいくつかあります。
Andrew G

メディアクエリに影響する「デスクトップサイトのリクエスト」オプションをトリガーすると、「レイアウトビューポート」も変更されることを指摘しておきます。レイアウトビューポートの詳細については、the-mobile-web-handbookを確認してください。
Rick

19

ChromeでUser-Agent「デスクトップサイトをリクエスト」した場合、Chrome が変更されるだけでなく、元のビューポートメタタグも無視されることを指摘したかっただけです。したがって、User-Agentもはや探知する必要はなく、ほとんどのレスポンシブサイトが自動的に行うように、ビューポートの変更に依存できます。詳細については、この変更を参照してください。


1
それをありがとう。私自身の非常にシンプルなWebサイトは、クリックされない場合は動作が大きく異なり、CSSでメディアクエリしか実行していないので、その理由を理解できませんでした。
R Reveley 2017

17

もう1つのわずかな違いは、リダイレクタがURLを移動する前に、意図的に入力された最後のURLに対するリクエストであるように見えることです。例えば:

前提 somesite.comはエージェントをスニッフィングし、Androidを確認して、document.location + = "/ m"を実行します。

次に:ブラウザにはsomesite.com/mのURLが表示されます

ただし、「デスクトップサイトをリクエスト」すると、User-Agentが変更され、somesite.comから再リクエストされます。

例外最初にsomesite.com/mのモバイルURLに直接アクセスしていた場合、somesite.com / mがリロードされるだけです。

私はこれがHTTP 301と302リダイレクトで機能することを期待し、document.locationの変更(少なくとも説明したとおり)で機能することを知っており、<meta>リフレッシュで機能すると推測します。


これに基づいて答えを出しましか?
Keale 2015年

@Kealeは、おそらくタイムスタンプが
逆になります

POSTリクエストが302または303を取得して別のURLのGETを提案した場合、ユーザーが「デスクトップビュー」設定を変更すると、ブラウザーは、302/303を返した元のURLにGETリクエストを送信します(POSTパラメーターが失われます) )。FirefoxとChromeの両方がこれを実行しているようで、IMOはこれが発生するはずの事態ではありません。
ジェイク

-2

このJavaScriptスニペットは、実質的に同じことを行います。

function requestDesktopSite() {
    document.getElementsByTagName('meta')['viewport'].content='min-width: 980px;';
}
<button onclick="requestDesktopSite()">Request Desktop Site</button>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.