CSS - アブソリュートポジショニングのモバイルレスポンス

Question

アブソリュートポジショニングを使用する場合、レスポンシブデザインにいくつかの問題がありました。私は画像と内部divを含むcontainer-divを持っています。絶対的な位置を通して、私はイメージの前にinner-divを配置しました。

<div class="outer-div" style="position: relative"> 

    <img src="image.jpg" /> 

    <div class="inner-div" style="position: absolute; top: 10px;"> 
    <p> text here </p> 
    </div> 

</div> 

モバイルでこのページを表示すると、インナーdivとテキストが比例して小さくなるという問題があります。これは意図した効果ではありません。小さな画面では、フォントサイズを同じままにしておきたい（画面の多くをカバーすることを意味する）。

奇妙なことに、Chromeでは、ブラウザのサイズを変更しても問題ありません。しかし、デベロッパーツール（WindowsではCtrl + Shift + C）の下でモバイルビューをクリックすると、縮小されます。

この問題を回避する方法は誰でも知っていますか？

Answer 1

ドキュメントのヘッドに、このメタタグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">