如何讓我的響應式網站在手機上兌現“請求桌面網站”？

Question

我有一個響應式的動態網站（Java Servlet 驅動和完全手工編碼）。 因為它是一個返回數據表的科學站點，所以某些選項在較小的視口寬度下不可用。 然而，可能有些用戶更喜歡在桌面站點上掙扎以訪問這些選項，我希望適應它們。

我的問題是，對於 iOS 10 和 Android 手機用戶來說，最簡單的方法是什么？ 這是因為“請求桌面站點”在運行 Safari iOS 10 的 iPhone 5 或 6 上不適用於我的網站，當它在 Android v.6 中的 Chrome 瀏覽器上工作時。 當人們選擇此選項時，我真的無法找出 iOS 10 正在尋找什么。

響應式編碼的相關細節：

Head tag: 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

CSS stylesheet viewport sections:
@media screen and (max-width:800px)
@media screen and (max-width:700px)
@media screen and (max-width:625px)
@media screen and (max-width:500px)
@media screen and (max-width:400px)

我的網站使用 vanilla Javascript——而不是 JQuery 或其他框架，我寧願避免使用。

我花了一些時間嘗試谷歌這個，但我發現的討論與特定系統（WordPress 等）有關，Apple 開發人員網站上的 Safari 部分沒有任何內容。

Answer 1

自己回答問題

因此，在查看了一些設備后，似乎：

• Mobile Safari 正在尋找一個單獨的（無響應的）非移動站點，假設它位於特定的移動站點上。
• 運行 v.6 的 Android 上的 Chrome（但不是 Opera）試圖破解，大概是通過忽略@media screen語句。

但是我在以下位置找到了一個javascript 解決方案：

D.Tipson 的 response -request-desktop-site.js 。

這對我在運行 iOS 10.3.3 的 iPhone 5 和 6 和（兩年后）運行 iOS 13.3 的 iPhone XS 上的移動 Safari 中都有效。

附錄 31.12.2019

為了響應進一步詳細信息的請求，我所做的只是在每個網頁的底部，就在</body>標記之前添加以下內容：

<script type="text/javascript"> 
(function(d){ 
function C(k){return(d.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2];} 
var ua = navigator.userAgent, 
ismobile = / mobile/i.test(ua),  
mgecko = !!( / gecko/i.test(ua) && / firefox\//i.test(ua)), 
wasmobile = C('wasmobile') === "was", 
desktopvp = 'user-scalable=yes, maximum-scale=2', 
el;  
if(ismobile && !wasmobile){ 
d.cookie = "wasmobile=was";  
} 
else if (!ismobile && wasmobile){ 
if (mgecko) { 
el = d.createElement('meta'); 
el.setAttribute('content',desktopvp); 
el.setAttribute('name','viewport'); 
d.getElementsByTagName('head')[0].appendChild( el ); 
}else{ 
d.getElementsByName('viewport')[0].setAttribute('content',desktopvp); 
} 
} 
}(document)); 
</script> 

我的視口標簽是：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

您可以在我的FlyAtlas 2 站點上進行測試：選擇 Gene，然后使用示例基因vkg 。 如果您隨后更改為桌面版本，您將獲得在表格中顯示標准偏差等的附加選項。

另請注意，在 iOS 13 中，您在手機上調用“請求桌面站點”的方式與以前的版本有所不同。 我最近沒有檢查Android。

Answer 2

在您可以請求網站的 PC 版本的情況下，您實際上不再是在談論響應式網站。 在響應式普及之前，人們使用兩個網站。 通常是 www。 網站和一個米。 M站點為移動設備格式化的站點。 如果您的手機在某個域中檢測到 M 站點，它將默認為它，如果您選擇轉到桌面版本，則您將離開 M 站點轉到主站點。

如果您希望創建 M 站點，您需要將其設置為您的托管服務提供商的附加域，並在您的域文件中設置為 M 記錄。

編輯：也就是說，您可以使用 JavaScript 偽造它以有條件地加載內容，它使用初始屏幕大小來選擇一組默認值，這些默認值可以與頁眉/頁腳中的按鈕交換。