从视口中排除div

Question

我有一个显示使用css创建的括号的网页。页面需要移动友好，所以我设置了 视口标记this.state。然而，这迫使用户只看到一小部分，我想让他们看到整个支架，就像他们在更大的屏幕上看到的那样。因此，我需要指定包含括号的div不会随视口设置，看起来好像页面上没有设置视口。

我怎样才能达到这个效果？以下是我的页面的一些屏幕截图，以直观地显示我想要完成的内容。 第一个屏幕截图没有元视口标记，第二个屏幕截图是元视口标记，第三个是我想要完成的。标题和标题是使用视口设置的，但括号显示为没有视口。

我正在寻找一个css / html解决方案，但我愿意尝试使用JS或JQuery。 我已经尝试在容器上设置宽度和高度属性等等，但没有任何效果。还要注意，用于设置支架样式的css相当精致，所以我更喜欢在外部容器上工作的解决方案，并且不会影响支架的内部样式。

Answer 1

视口设置适用于窗口，而不适用于页面上的元素，因此无法从视口中排除元素。

如果它是一张图片，那将非常容易，但是如果您正在应用大量繁琐（可能绝对定位）的CSS来完成支架，那么它会限制您的选择。

如果开始过度缩放文本，您还会遇到可读性问题。因此，我认为在不要求您更改括号本身的选项中最好的选择是在父div上设置overflow-x: auto;，这将为您提供滚动条并让您的用户可以滚动到其余部分支架。

如果你需要一次扩展整个支架，你可能不得不使用一些JavaScirpt，this post看起来像是一个开始处理扩展的好地方。

如果您感觉更具冒险精神，那么整体上最好的解决方案就是让支架本身具有响应性。 Here is an example您可以参考。