在具有特定視口的設備上顯示完整（桌面視圖）網站（例如，低於320像素）？

我一直在一個完全響應的網站上完成我的工作（使用Bootstrap 3框架），最近客戶詢問是否可以在較小的設備上安裝完整（桌面）版本的網站（例如，較低的比320px）。由於我以前從未遇到過這樣的需求，我不知道是否有任何法律解決方法，例如把一個附加的視口元標記的頭，像這樣：在具有特定視口的設備上顯示完整（桌面視圖）網站（例如，低於320像素）？

<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），我會很高興知道你對此的想法。

謝謝！

來源

2014-10-06 Balabeque

我可能有一個「顯示桌面版本」按鈕，可以設置適當的cookie並刷新頁面。然後在服務器上，根據Cookie的值發出適當的視口元標記。 – cvrebert 2014-10-06 10:19:01

客戶的要求沒有任何意義。也許你應該首先問他們爲什麼要這樣做。 – Joonas 2014-10-06 10:19:40

完全同意你Joonas，因爲該網站目前在所有流行的設備上看起來非常好。客戶通過「what if」聲明激勵他的請求，他說：「如果客戶通過一個小型舊式設備進入我們的網站會怎麼樣？在這種情況下讓我們給他看一個完整的桌面版本......」希望我的PM能夠設法改變客戶的頭腦。 – Balabeque 2014-10-06 10:40:03

嗯，我必須找到一個解決方案，因爲我的客戶一直堅持。所以我用了一小段JavaScript/jQuery來改變'viewport'meta的內容。那就是：

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

其實，我不知道該怎麼合法的，但它的工作原理和我決定回答我的問題，在任何情況下，你們的遇到這種怪異的需求在未來。

來源

2014-10-10 21:52:21 Balabeque

謝謝，它在我的頁面上正常工作http://zinzinzibidi.com/finansal_muhasebe_dersleri/temel_bilgiler – 2015-05-01 12:20:25

在具有特定視口的設備上顯示完整（桌面視圖）網站（例如，低於320像素）？

回答

相關問題