最小化されたときに、ウェブサイトのディスプレイに水平スクロールバーを表示させるにはどうすればよいですか？

私は「練習」ウェブサイトを作って、モバイルの最適化を本当に把握していません。代わりに、私は多くのウェブサイトがやっている別のアプローチをとってみたいです。サイトが最小化されている場合にのみ、ページの下部に水平スクロールバーを表示するようにします。すべての要素サイズはパーセンテージ量であり、すべてのdivも100％の高さと幅のスタイルを持っています。私はまた、すべての要素が同じ位置にとどまり、どれも移動したり消えたりしないようにします。私の場合、サイトが最小化されるたびに、次のようになります。最小化されたときに、ウェブサイトのディスプレイに水平スクロールバーを表示させるにはどうすればよいですか？

すべての（画像、テキストなど）が縮小され、小さな画面サイズに収まるようになりました。
一部の要素は消え、他の要素はオーバーレイします。（たとえば、ブートストラップの2つの 'col-md-6'列を持つ行がある場合、通常のサイズですべて正常に見えますが、最小化すると列の1つが巨大になり、もう1つの列が存在すると判断されます。
< BR>のテキスト内の段落の流れを歪める

私が試してみました：。ボディ、HTML、およびDIVのスタイルとして

overflow-x: auto; 
overflow-y: hidden;

を（個別にではなく、一度に）が、ちょうど垂直スクロールを無効にし、さらに下にある要素は見えません。そして、それでもオートオーバーフローx thingyは

min-width: 800px;

をし、それが水平スクロールを作成しますが、まだいくつかの要素が失われ、あなたが見るためにスクロールできるように水平スクロールは十分な長さだけONLYようです：私も試してみました

にそれをOLVE全体のナビゲーションバー。

<head> 
    <title>My Website</title> 
    <meta name="viewport" content="user-scalable = no"> 
</head>

をしたり、問題があなたのビューポートのタグが付けられたそうです

<head> 
    <title>My Website</title> 
    <meta name="viewport" content="initial-scale=1"> 
</head>

してみてください：

出典

2016-05-29 John Doe

サイトはモバイルビューポートに調整しようとするだろう、あなたは追加することでこれを防ぐことができます。

また、身体に固定幅を設定する必要があります。

出典

2016-05-29 01:01:35

実際には何も変更されていませんでしたが、レイアウトの歪みの一部が変わりましたが、それでも問題の大部分が残っています。私は以前と同じように、コンテンツの中にモバイルデバイスの幅を持っていなければなりません。 –

私の答えと並行して、bodyタグの幅を設定する必要があると思います。 body {width：1800px;}をCSSに追加して、これが役立つかどうか確認してください。 –

それはうまくいった！まあ、ほとんどの部分です。今のところ、私の解像度は低いから（私は推測している）、すべての要素が右にずれる（多くの場合）。幅を狭くしたり、幅を最小にする必要がありますか？ –

最小化されたときに、ウェブサイトのディスプレイに水平スクロールバーを表示させるにはどうすればよいですか？

答えて

関連する問題