問題タブ [viewport-units]

私の理解では、1vw はビューポートの幅の 1/100 であるため、特定のビューポート全体で 100vw になります。ただし、幅が 25vw の 2 つの div がある場合、1 つは右端から 25vw に配置され、1 回は左端から 25vw に配置され、かなりオーバーラップします。これは複数のブラウザにまたがって当てはまりますが、なぜそうなるのでしょうか?

width=device-width を設定するときにメタ ビューポート タグが機能する方法を正しく理解していることを確認しようとしています。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">ピクセル単位を使用してモバイル デバイスで作業する場合、320 ピクセル幅のグリッド上で与えられているかのように扱われる (または扱われるべき)というのは正しい記述でしょうか? つまり、 width:160px の要素は画面の (160/320 = 50%) を占めますか?

この動作は、デスクトップ ブラウザーで実行している場合は機能しないようです。モバイルとデスクトップで同じデザインを取得したい場合、パーセンテージまたはvw/vh単位のいずれかを使用する必要がありますか?

http://codepen.io/axlpl/pen/vEOyqLのようなものを作成しています が、ブラウザのサイズを変更すると、右のサイトが 1 行ではなく左の下に表示されることがあります。Sass 関数 vw では、procent を取得する関数、最初の引数 "$size" でそのプロジェクト サイズ、ここでは 1200px を取得し、2 番目の引数で "$target" の要素サイズを取得しました (プロジェクト サイズ 1200px の例)。

HTML

SASS

JS

Modernizr を使用して、ブラウザーでビューポート ユニットがサポートされているかどうかを検出しようとしています。

これが私のテストです：

ビューポート ユニットが iOS7 でサポートされていないことは承知しているため、ここでフォールバックが必要になります。

横向きの iPad で iOS7 のページを読み込むと、アラートが実行されます。

ただし、ページを縦向きで読み込むと、アラートは表示されません。

条件が風景でのみ機能するのはなぜですか? これは Modernizr の既知のバグですか?

親の高さが vh 単位を使用して定義されている別の div 内に div を配置しようとしています。

基本的に、私がする必要があるのは、child height = parent height - 50px. 親の最大高さは、画面の高さの 80% にする必要があります。子の高さには、長いコンテンツを表示するためのスクロールバーが必要です。

いくつかの異なることを試しましたが、何も機能しないようです。

これは私が試したものです：

http://jsfiddle.net/qLhhk46n/

何か考えはありますか？ありがとう

目標: スクロールせずに、あらゆる画面サイズと向きにスムーズにフィットするサイト。SassMeister で、メディア クエリごとに異なるレイアウトを使用して、ばかげた数学の問題のパッキング部分を解決しました。

http://sassmeister.com/gist/8f9954aa8973b97f43c8

私ができる唯一の方法は、すべての div のサイズ設定に vh と vw に基づく calc を使用することです。計算単位とビューポート単位の両方が、safari 5、Opera mini、IE8 の問題です。

vh、vw、calc にアクセスできないと、ポリフィルはスクロールなしで画面に正確に収まりません。

だから...私はこれに不慣れで、トマトを投げませんが、javascriptを使用して次のことを行うことは可能ですか(そして非常識ではありません):

1) 読み込み時に vh と vw の値を取得し、サイズを変更します (この部分はビューポート、バージなどで実行できることがわかっています)

2）すべてのcss calc関数を同じ内部のjavascriptに置き換えます

3) 結果の div サイズをスタイルシートに出力する

大変助かりますが、これはjavascriptがレイアウト全体を担当していることを意味し、眉をひそめていることを理解しています。他に方法がわかりません。コンセプトが運命づけられている確固たる実用的な理由、または別のアプローチがある場合は、それについても知りたい.

ありがとうございました。

奇妙な iOS バグが再び発生しました。約 70vh に設定されたヘッダーを持っていますが、(ほとんどの場合) うまく機能します。以前は iOS Safari でバグがありましたが、修正されたようです。画面を回転させたとき以外は。ビューポートを回転させるたびに 2 倍になるようです。70vh は 140vh になり、次に 210vh と続きます。

CSS やメタ ビューポート タグを変更して、これを停止できるものがあるかどうかはわかりません。それがそれを回避する唯一の方法である場合、私は楽しいJavascriptソリューションを探します.

私が参考にしているサイトはこちらです。それがあなたのものなら、すべてのコードはgithubにあります。