在具有特定视口（例如低于320像素）的设备上显示完整（桌面视图）网站？ [英] Showing full (desktop view) website on devices with particular viewport (e.g. lower than 320px)?

问题描述

我在一个完全响应的网站（使用Bootstrap 3框架）上完成了我的工作，最近客户询问是否可能在更小的设备上拥有完整的（桌面）版本的网站（例如，低于320像素）。由于我从来没有遇到过这样的要求，我想知道是否有任何法律解决方法，例如。在头部中添加一个额外的视口元标记，如下所示：

I've been finishing my work on a fully responsive website (using Bootstrap 3 framework) and recently the client has asked if it would be possible to have a full (desktop) version of the site on smaller devices (for instance, lower than 320px). Since I've never come across such requirements before, I wonder if there's any legal workaround, e.g. putting an additional viewport meta tag in the head, something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=1024, user-scalable = yes" media="screen and (max-width:      319px)">  

如果有任何已知的（合法的）方法来实现这个（无论在JS / jQuery或CSS ）。

If there are any known (legal) ways to achieve this (regardless if in JS/jQuery or CSS), I'd appreciate to know your thoughts about this.

谢谢！

推荐答案

那么，我必须找到一个解决方案，因为我的客户坚持。所以我使用一小块JavaScript / jQuery为了更改'viewport'meta的内容。这是：

Well, I had to find a solution for this, since my customer kept on insisting. So I've used a little piece of JavaScript/jQuery in order to change the content of 'viewport' meta. Here it is:

var myViewport = document.querySelector("meta[name=viewport]");

    if ($(window).width() < 320){
    myViewport.setAttribute("content", "width=1024; user-scalable = yes");
    } else {
    myViewport.setAttribute("content", "width=device-width; initial-scale = 1.0");
} 

其实，我不知道这是多么合法，我决定回答我自己的问题，万一你们中的任何人遇到这个奇怪的要求在未来。

Actually, I have no idea how legal this is, but it works and I've decided to answer my own question, in case any of you guys comes across this weird requirement in future.

这篇关于在具有特定视口（例如低于320像素）的设备上显示完整（桌面视图）网站？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！