Showing full (desktop view) website on devices with particular viewport (e.g. lower than 320px)?

问题

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)">  

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.

Thanks!

回答1:

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.

来源：https://stackoverflow.com/questions/26214029/showing-full-desktop-view-website-on-devices-with-particular-viewport-e-g-lo