简体繁体 English

将用户从网站的自适应版本切换到桌面版本

[英]Switch user from adaptive to desktop version of site

原文 2013-11-06 23:17:00 4 2 javascript/ html/ css

I have a desktop and adaptive (with media query in css) design of site. 我有一个桌面和自适应（在CSS中使用媒体查询）网站设计。 How can I show desktop version of my site if user come to it from mobile gadget? 如果用户通过移动小工具访问网站，该如何显示我的网站的桌面版本？ There is only idea in my head: 我脑子里只有一个念头：

Set up cookie (for example siteVersion = mobile) previously. 预先设置cookie（例如siteVersion = mobile) 。
If user choose desktop version (via clicking button, link...however) set up this cookie to "desktop" and after refresh page load css with desktop design. 如果用户选择桌面版本（通过单击按钮，链接...但是），则将此Cookie设置为“桌面”，并在刷新页面后加载具有桌面设计的CSS。

Does anyone have other ideas? 还有其他想法吗？ Maybe someone has someexperience with it? 也许有人对此有经验？

2 个解决方案

So, what @jared gotte said - "adaptive" implies a web page that can adapt to the device capabilities without having to serve up different content from the server. 因此，@ jared gotte所说的-“自适应”表示一个网页，该网页可以适应设备功能，而不必从服务器提供不同的内容。 So in that regard your question is a bit nonsensical. 因此，就此而言，您的问题有点荒谬。

But, that said, the way most [large] sites handle serving different content to mobile .vs. 但是，也就是说，大多数大型网站处理向移动.vs提供不同内容的方式。 desktop is by setting up different subdomains. 桌面是通过设置不同的子域来实现的。 For example Facebook uses www.facebook.com for the desktop version of the site, and m.facebook.com for the mobile version. 例如，Facebook使用www.facebook.com作为网站的桌面版本，而使用m.facebook.com作为移动版本。 When a user first hits the site, the server looks at the User-Agent header to decide what type of device they're using and redirects them appropriately. 当用户首次访问该网站时，服务器会查看User-Agent标头来确定他们使用的设备类型并适当地重定向它们。 If/when you want to switch them between the two on the client, you can use JS to redirect their browser . 如果/当您想在客户端上的两者之间切换时，可以使用JS 重定向其浏览器。

The caveat to this is that you'll need to setup the DNS hostname(s), and make your server code aware of the Host header on incoming requests. 需要注意的是，您需要设置DNS主机名，并使服务器代码知道传入请求中的Host标头。

Put your desktop CSS in one CSS file. 将您的桌面CSS放在一个CSS文件中。 Put your adaptive stuff in another CSS file. 将您的自适应内容放入另一个CSS文件中。 Serve both to the user. 为用户服务。 But then if a user says "show me the desktop version", stop serving them the adaptive CSS file. 但是，如果用户说“向我显示桌面版本”，请停止向他们提供自适应CSS文件。