javascript - 如何让我的响应式网站在手机上使用 "Request a desktop site"？

Question

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

我的问题是，对于 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)

我的网站使用普通 Javascript，而不是 JQuery 或其他我希望避免使用的框架。

我花了一些时间尝试用谷歌搜索这个，但我发现的讨论与特定系统(WordPress 等)有关，而苹果开发者网站上的 Safari 部分没有任何内容。

Answer 1

自己回答问题

所以在查看了一些设备之后，似乎:

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

但是我在以下地方找到了一个javascript 解决方案:

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

这适用于运行 iOS 10.3.3 的 iPhone 5 和 6 以及(两年后)运行 iOS 13.3 的 iPhone XS 的移动 Safari。

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> 

我的视口(viewport)标签是:

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

你可以在我的 FlyAtlas 2 site 上测试这个: 选择 Gene 然后使用示例基因 vkg。如果您随后更改为桌面版本，您将获得其他选项以在表格中显示标准偏差等。

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