0

すべての画面幅でまったく同じように見える Web サイトを構築したいと考えています。つまり、Web サイト全体が画面の幅、またはより正確にはビューポートの幅に応じてスケーリングされます。

これは SVG 画像の場合は比較的簡単で、ビューポートの幅に応じてすべての画像が正しくスケーリングされます。ビューポートの幅は基準点であり、そこからすべての画像がスケーリングされます。ただし、テキストの参照ポイントは、デスクトップ ブラウザーと iPhone の Safari (モバイル ブラウザーを想定しています) では異なります。

私の調査によると、異なるサイズのテキストには 2 つの理由が考えられるようです: デフォルトの CSS の違いまたはレンダリング エンジンの違いです。Chrome の既定の CSS または Firefox の既定の CSS でピクセル サイズのテキストへの参照が見つからないため、この設定はレンダリング エンジンに由来すると考えられます。

私の IP は動的であるため、実際の例を提供することはできませんが、iPhone の Safariとデスクトップの Chrome で同じサイトを比較した画面を次に示します。テキストのサイズの大きな違いに注目してください。

これらの両方のブラウザでテキストを同じ相対的なサイズにする方法はありますか?

4

3 に答える 3

0

さらに、rems を使用してカスケード地獄を回避し、たとえば幅 1024px の元のレイアウト デザインを尊重する場合は、次のように固執できます。

onresize = onload = function(){
  document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
于 2013-06-07T10:00:48.020 に答える
0

JavaScriptで答えを見つけました：

onresize=onload=function(){
    document.body.style.fontSize=window.innerWidth/20+"px"
}

body 要素のビューポートの幅に応じてテキスト サイズを設定します。em に設定されたすべてのテキストは親に関連してサイズ設定されるため、すべてのテキストは body 要素から正しくサイズ設定されます。

于 2013-02-11T17:57:41.637 に答える