混合瀏覽器窗口寬度

Question

我的工作，我們正在尋找部署客戶端的網站的響應移動版本的一個項目 - 在這種情況下現有的「桌面」網站有兩個斷點：

>= 980px 
>= 1200px 

在屏幕小於980像素的設備上，「小型桌面」網站只是縮放以適應瀏覽器，因此用戶可以點擊縮放等，並有效地瀏覽整個桌面網站。

我們現在想爲小屏幕實現一個網站版本（< 480px），但是我遇到的問題是，通過更改元視口標籤以適應小屏幕上1：1佈局的斷點，我已經失去了481px和979px之間的屏幕用戶使用桌面版網站的縮放版本的能力。

以前我用的是meta標籤：

<meta name="viewport" content="width=980">

但據我瞭解有小屏幕設備上正確縮放的佈局我需要調整爲：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我真正需要的當然是兩者的結合！ - 有任何想法嗎？

Answer 1

對http://blakelondon.co.uk也有類似的挑戰 - 在大於移動設備的設備上進行本機擴展，而不是在移動設備上進行響應。

你的問題與我的相反，但我認爲同樣的方法可行。

解決方案使用JavaScript將元視口重寫爲固定寬度以強制本地設備縮放。警告 - 它在上下文中有一個佈局重排的小缺陷。

首先設置的元視爲正常：

<meta name=「viewport」 content=「width=device-width」 /> 

然後，在撒一些JavaScript該值改寫爲固定寬度，迫使上更小的設備（挑screen.width以適合的）原生縮放：

if (screen.width <= 640) { 
    viewport = document.querySelector(「meta[name=viewport]」); 
    viewport.setAttribute(‘content’, ‘width=980’); 
} 

希望有所幫助！

P.S.我的同事@ cole007也提到了這個問題，代碼略有不同： http://cole007.net/blog/136/responsiveish-viewport-hack