問題タブ [viewport-units]

残念ながら、次の例に示すように、ブラウザーの高さ100vhとは必ずしも同じではありません。100%

この問題は iPhone 6+ でより顕著になり、上部のロケーション バーと下部のナビゲーション バーがスクロール時にどのように拡大および縮小するかが示されますが、 の計算には含まれません100vh。

高さの実際の値は、JS100%で使用することで取得できます。window.innerHeight

100vhJS で現在のピクセルへの変換を計算する便利な方法はありますか?

を計算するためだけにインライン スタイルでダミー要素を生成する必要がないようにしています100vh。

この質問の目的のために、不適切な値を生成する、max-widthまたは生成する可能性のある敵対的な環境を想定し、ページのどこにも既存の要素はありません。基本的に、正常であることが保証されているネイティブ ブラウザー機能を除いて、問題が発生する可能性があるものはすべてあると想定してください。max-height100vh

これまでに思いついた最高のものは次のとおりです。

しかし、 の現在の値を計算するには冗長すぎるよう100vhです。他に問題があるかどうかはわかりません。

cssのみを使用して背景画像から要素の最小幅を計算することは可能ですか?

ビューポートの高さ全体を占めるインライン フレックスボックス ラッパー内で、javascript を使用して、背景画像の (w / h) スケールに基づいて、各子 div の相対的な幅を計算できます。

次に、css3 ビューポートの高さを使用してこれを要素に適用します

したがって、画像が の場合130px width x 100px height、div に適用される最小幅は です130vh。

javascriptなしで背景画像の幅ベースのレイアウトを実現できますか?

実証するフィドル: https://jsfiddle.net/ucxyefmL/

サイトのセクションの背景画像で全幅と全高を使用していますが、Android で動作が不安定です。modernizr を使用して touchevents を検出し、background-attachment を固定からローカルに変更しています。これがサイトで、以下は私が使用しているcssです。

そのため、流動的なレスポンシブ デザインに取り組んでおり、ウェブサイトのテキスト サイズは % に基づいて機能します。印刷しようとすると（cmd + p）、ウェブサイトのデザインがクロムで壊れることに気付きました。かなり古い既知の問題のように見えますが、これを機能させるハックをオンラインで見つけることができませんでしたか? これについて何か提案してもらえますか？

ここで言及されている問題: https://code.google.com/p/chromium/issues/detail?id=382313 ローカルの HTML ページに配置して、Chrome で印刷を試すことができる HTML は次のとおりです。

印刷が呼び出されたときにハードコードされたビューサイズを渡す方法があれば、それも問題でしたか?

vh 単位を使用して、手動で計算された高さとブラウザによって計算された高さに違いがあるのはなぜですか。この誤算のため、サブピクセルレベルで問題が発生しました。

そして、100vh が 535px の場合、なぜ 100 で割ったときに最後にこの "...005" があるのですか? 5.35 があるはずです。

テストはフィドルにあります。

https://jsfiddle.net/szpadel444/fdhvkygx/1/

少し複雑な問題があります。単位line-heightの違いとCSSで設定する必要があります。私の考えは、このコードで設定することですvhpxcalc

簡単に聞こえますが、うまくいきません。これらの単位を使用した計算が機能しない理由は、CSS Calc Viewport Units Workaround で説明されています。これは、マージンとパディングをハッキングすることでプロパティに対して解決されheightますが、行の高さのプロパティには使用できません。

問題は Chrome、IE、Edge で解決されていることがわかりますが、Firefox でもこれを行う必要があります。Firefox では、開発者ツールに表示されます

プロパティ値が無効です。

何か案が？（JavaScriptは私にとって解決策ではありません）