如何让我的响应式网站在手机上获得 "Request a desktop site" 荣誉？

Question

我有一个响应迅速的动态网站（Java Servlet 驱动且完全手工编码）。因为它是一个返回数据表的科学站点，所以某些选项在较小的视口宽度下不可用。然而，可能有些用户更喜欢在桌面站点上挣扎才能访问这些选项，我希望满足他们。

我的问题是，对于 iOS 10 和 Android 手机用户来说，最简单的方法是什么？这是因为“请求桌面站点”在 iPhone 5 或 6 运行 Safari iOS 10 上对我的站点不起作用，而在 Chrome Android v.6 中的浏览器。我真的找不到当一个选择此选项时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 或其他我希望避免使用的框架。

我花了一些时间尝试 Google 这个，但我发现的讨论与特定系统（WordPress 等）有关，Apple 开发者网站上的 Safari 部分没有任何内容。

Answer 1

在您可以请求网站的 PC 版本的情况下，您并不是真正在谈论响应式网站。在响应式出现之前，普通人使用两个网站。通常是一个 www。网站和米。 M 站点为移动设备格式化的站点。如果您的 phone 在域中检测到 M 站点，它将默认为它，如果您选择转到桌面版本，您将离开 M 站点转到主站点。

如果您想创建 M 站点，您需要将其设置为托管服务提供商的附加域，并在您的域文件中设置为 M 记录。

编辑：就是说，您可以使用 JavaScript 伪造它以有条件地加载内容，它使用初始屏幕尺寸来选择一组默认值，这些默认值可以用 [=16= 中的按钮交换].

Answer 2

自己回答问题

因此在查看了一些设备之后，似乎：

Mobile Safari 正在寻找一个单独的（无响应的）非移动站点，假设它位于特定的移动站点上。
Chrome（但不是 Opera）在 Android 运行 v.6 上试图破解东西，大概是通过忽略 @media screen 语句。

但是我在javascript中找到了解决方案：

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

这对我在 iPhone 5 和 6 运行 iOS 10.3.3 和（两年后）iPhone XS 运行 iOS 13.3.

附录 2019 年 12 月 31 日

为了响应提供更多详细信息的请求，我所做的只是在每个网页底部的 </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 site 上进行测试：选择基因，然后使用示例基因 vkg。如果您随后更改为桌面版本，您将获得其他选项以在 table.

中显示标准偏差等

另请注意，在 iOS 13 中，您在 phone 上调用“请求桌面站点”的方式有 changed from previous versions。我最近没有检查Android。

如何让我的响应式网站在手机上获得 "Request a desktop site" 荣誉？

How do I make my responsive website honour "Request a desktop site" on mobiles?

javascript

css

mobile-safari

ios

responsive