ビューポートからdivを除外する

Question

CSSを使用して作成された括弧を表示するWebページがあります。ページはモバイルフレンドリーである必要があるため、 ビューポートタグ<meta name="viewport" content="width=device-width, initial-scale=1">を設定しました。しかし、これによりユーザーは小さな部分しか見ることができません。大画面でのようにブラケット全体を見ることができます。したがって、ブラケットを含むdivがビューポートで設定されないように指定する必要があります。ビューポートがページに設定されていないかのように表示されます。

どうすればこの効果を得ることができますか？ここで私が達成したいことを視覚的に示す私のページのいくつかのスクリーンショットです。 最初のスクリーンショットはメタビューポートタグなし、2番目はメタビューポートタグ付き、3番目は達成したいものです。ヘッダとタイトルはビューポートで設定されますが、ブラケットはビューポートがないかのように表示されます。

私は、CSS/HTMLのソリューションを探していますが、JSやjQueryのを試して喜んでいます。 コンテナの幅と高さのプロパティを設定しようとしましたが、何も機能しませんでした。また注意するには、ブラケットのスタイルを設定するCSSはかなりデリケートなので、外側のコンテナで動作するソリューションを好み、ブラケットの内部スタイルには影響しません。

Answer 1

ビューポートの設定は、ウィンドウに適用されるページ上の要素ではないので、ビューポートのフォーム要素を除外することは不可能です。

画像の場合は非常に簡単ですが、大括弧を達成するために多大な（おそらく絶対的に配置された）CSSを適用していると、オプションがかなり制限されます。

テキストをあまりにも小さくスケーリングし始めると、読みやすさの問題が発生します。したがって、ブラケット自体を変更する必要がないオプションの中で最も良い方法は、親divにoverflow-x: auto;を設定することです。これはスクロールバーを与え、ブラケットの残りの部分にスクロールするためのアクセス権をユーザに与えます。

ブラケット全体を一度に拡大縮小する必要がある場合、おそらくJavaScirptを使用する必要があります。this postはスケーリングを処理するのに適しています。

あなたはより多くの冒険を感じている場合は、全体的に最善の解決策は、ブラケット自体が応答することです。 Here is an exampleを参照することができます。