從視口中排除div

Question

我有一個顯示使用css創建的括號的網頁。該頁面需要移動友好，所以我已設置 視口標籤<meta name="viewport" content="width=device-width, initial-scale=1">。但是，這會迫使用戶只看到一小部分，我想讓他們像在更大的屏幕上一樣看到整個支架。所以我需要指定包含括號的div沒有被視口設置，它看起來好像在頁面上沒有設置視口。

我該如何達到這個效果？以下是我的頁面的一些屏幕截圖，以顯示我想要完成的內容。 第一個截圖沒有元視口標籤，第二個是元視口標籤，第三個是我想完成的。標題和標題與視口一起設置，但括號顯示爲沒有視口。

我要尋找一個CSS/HTML解決方案，但我願意嘗試JS或JQuery的。 我曾嘗試設置容器的寬度和高度屬性以及其他東西，並沒有任何工作。另外值得注意的是，CSS風格的支架是相當微妙的，所以我更喜歡一個解決方案，在外部容器上工作，並不影響支架的內部樣式。

Answer 1

視口設置適用於窗口，而不是在頁面上的元素，所以這是不可能排除的元件形成所述視口。

如果它是一個像這將是非常容易的，但如果你申請了很多繁瑣的（可能是絕對定位）的CSS來實現自己的支架，它會限制你的選擇相當多。

如果您開始縮小文本太多，您還會遇到可讀性問題。所以我認爲在不需要您更改支架本身的選項中，您最好的選擇是在父div上設置overflow-x: auto;，這將爲您提供滾動條並讓您的用戶可以滾動到支架的其餘部分。

如果您需要一次性縮放整個支架，您可能不得不轉而使用一些JavaScirpt，this post看起來像是一個開始處理縮放的好地方。

如果你感覺更冒險，最好的解決辦法是整體，使支架本身的響應。 Here is an example你可以用作參考。