Question

我有一个响应式的动态网站（Java Servlet驱动和完全手动编码）。因为它是返回数据表的科学站点，所以某些选项在较小的视口宽度下不可用。但是，可能有些用户更愿意使用桌面网站来访问这些选项，我希望能够容纳这些选项。

我的问题是，对于手机用户（iOS 10和Android）来说，最简单的方法是什么？这是因为在Android v.6中使用Chrome浏览器时，“请求桌面网站”对于运行Safari iOS 10的iPhone 5或6上的我的网站无效。当我们选择这个选项时，我真的找不到whatiOS 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等）有关，并且在Safari部分的Apple开发者网站上没有任何内容。

Answer 1

如果您可以申请该网站的PC版本，那么您实际上并不是在谈论响应式网站了。在回应之前，普通人使用了两个网站。通常是www。网站和m。为移动设备格式化M站点的站点。如果您的手机在域中检测到M站点，则默认为该站点，如果您选择转到桌面版，则您将离开M站点以转到主站点。

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

编辑：也就是说，您可以使用JavaScript假装它来有条件地加载内容，它使用初始屏幕大小来选择一组默认值，这些默认值可以通过页眉/页脚中的按钮进行交换。

Answer 2

自己回答问题

所以在看了几个设备后，似乎：

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

但是我在

中找到了 javascript解决方案

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

这适用于运行iOS 10.3.3的iPhone 5和6上的移动Safari。

如何使我的响应式网站获得荣誉＆＃34;请求桌面网站＆＃34;在手机上？

2 个答案: