如何使我的响应式网站荣誉“请求桌面网站"?在手机上? [英] How do I make my responsive website honour "Request a desktop site" on mobiles?

问题描述

我有一个响应迅速的动态网站(由Java Servlet驱动并完全手工编码).因为这是一个返回数据表的科学站点，所以某些选项在较小的视口宽度下不可用.但是，可能有些用户更愿意在桌面站点上苦苦挣扎以便访问这些选项，我希望能够容纳它们.

I have a dynamic website (Java Servlet driven and completely hand-coded) that is responsive. Because it is a scientific site returning tables of data, some of the options are not available at smaller viewport widths. However there may be users that prefer to struggle with the desktop site in order to access these options, and I wish to accommodate them.

我的问题是，对于iOS 10和Android手机用户，最简单的方法是什么?这是由于请求桌面站点"不适用于运行Safari iOS 10的iPhone 5或6的iPhone 5或6在Android v.6中的Chrome浏览器上运行时对我的站点不起作用的事实.当人们选择此选项时，我真的找不到iOS 10在寻找什么.

My question is What is the simplest way to make this possible for users of mobiles, both iOS 10 and Android? This is provoked by the fact that "Request a desktop site" is not working for my site on iPhone 5 or 6 running Safari iOS 10 when it is working on a Chrome browser in Android v.6. I really cannot find out what iOS 10 is looking for when one selects this option.

响应式编码的相关详细信息:

Relevant details of responsive coding:

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或其他我希望避免使用的框架.

My site uses vanilla Javascript — not JQuery or other frameworks, which I would prefer to avoid.

我花了一些时间尝试使用Google，但是我发现的讨论涉及特定的系统(WordPress等)，并且在Safari部分的Apple Developers网站上没有任何内容.

I have spent some time trying to Google this, but the discussions I have found relate to specific systems (WordPress and the like) and there is nothing on Apple’s Developers’ site in the Safari section.

推荐答案

我自己回答问题

因此，在查看了几种设备之后，似乎:

So after looking at a few devices it seems that:

• 移动Safari正在寻找一个单独的(无响应)非移动站点，前提是该站点位于特定的移动站点上.
• 运行v.6的Android上的Chrome(但不是Opera)正在尝试破解内容，大概是忽略了@media screen语句.

• Mobile Safari is looking for a separate (non-responsive) non-mobile site, assuming that it is on a specific mobile site.
• Chrome (but not Opera) on the Android running v.6 was trying to hack things, presumably by ignoring the @media screen statements.

但是我在以下位置找到了 javascript解决方案:

However I found a javascript solution in:

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

D.Tipson’s responsive-request-desktop-site.js.

这对于我在运行iOS 10.3.3的iPhone 5和iPhone 6和运行iOS 13.3的iPhone XS(在两年后)的移动Safari中都有效.

This works for me in mobile Safari on both iPhone 5 and 6 running iOS 10.3.3 and (two years later) an iPhone XS running iOS 13.3.

附录31.12.2019

响应于对更多细节的要求，我所做的就是在每个网页的底部</body>标记之前添加以下内容:

In response to a request for further details, all I did was add the following at the bottom of each web page, just before the </body> tag:

<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网站上进行测试:选择基因，然后使用示例基因 vkg .如果您随后更改为桌面版本，则可以使用其他选项在表格中显示标准差等.

You can test this at my FlyAtlas 2 site: choose Gene and then use the example gene, vkg. If you then change to the desktop version you get additional options to display standard deviations etc. in the table.

还请注意，在iOS 13中，您在手机上调用请求桌面网站"的方式为

Note, also, that in iOS 13 the way that you invoke ‘Request Desktop Site’ on your phone has changed from previous versions. I haven’t checked Android recently.

这篇关于如何使我的响应式网站荣誉“请求桌面网站"?在手机上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！