ウィンドウの幅のズームと変更

Question

すべての私の読書では、CSSを使用してズームしたところ、ではありません。では、すべてのブラウザでズームのサポートが限られていると考えています。この点で、私は助けることはできませんが、マイクロソフトのWORDは、Word文書の内容をズームしていないことに気づくことはできません。彼らが正しいかもしれない。

しかし、私は上の重い足取りてみましょう...学習体験として

、私が実際にズームして見たいと、ブラウザウィンドウのサイズを変更する場合に発生する =まさにです。つまり、要素のコンテナ+フォントサイズ+などは、ウィンドウサイズを縮小すると縮小し（ズームアウト）、ウィンドウサイズを大きくすると拡大します（ズームイン）。

しかし、レイアウトを一定の限度まで維持すること。

ところで、上記中心全ブロックである：例えば、丸いコーナーボックスの幅が到達したときに特定の幅は、例えば、デバイスの幅

の80％を言います。

たとえば、幅の丸いコーナーボックスは、ウィンドウが大きくなると大きくなり、ボックスの幅はウィンドウが小さくなると小さくなります。 =ズームアウトします。

私はズームのために同じことを望みますが、ウィンドウの幅を変更することなくズームすること、つまりウィンドウの内容だけを望みます。起こる何

：

にズームすると、すべてがCMD-プラスのカップルのUNTIL大丈夫、をズームアウトしても

をやっているように見えます。この時点で、丸みを帯びたコーナー境界が右に移動し、ブラウザウィンドウの視野を越え、超醜い水平スクロールバーが表示されます。

HTML：

<section class="roundedBodyCornersWrapper zoomStyleRule centerBlock elemPadding"> 

    <div class="roundedBodyCorners"> 

<img class="headerImage centerImage" src="images/Broken_Heart.gif" alt="crying" /> 

<section class="roundedTextCornersWrapper centerBlock elemPadding"> 

はCSS：

body { 
    background-color: white; /* around oval */ 
    margin:   2.0em; 
    font-size:  120%; 
    min-width:  300px; 
} 

.zoomStyleRule { 
    width: 75%;  /* always put fall-back spec 1st */ 
    width: auto\9; /* IE8 = exception to fall-back spec */ 
    width: 75vw;  /* even if this isn't here, still does not work */ 

    height: auto; 
} 

.roundedBodyCornersWrapper { 
    /* center via .centerBlock in layout */ 
    /* padding via .elemPadding in layout */ 
} 

.roundedTextCornersWrapper { 
    padding-bottom: 2.0em; /* + a tad extra above .mainContent */ 
} 


.headerImage { 
    /* 
     original size = 888px X 448px (55.5em X 28em) 
    */ 
    width:   75%; 
    width:   auto\9; /* IE8 exception */ 

    padding-bottom: 1.5em; 
} 

.centerBlock, .centerImage { 
    display:  block; 
    margin-left: auto; 
    margin-right: auto; 
} 

.infoHeader { 
    font-family: Georgia, Helvetica; 
    font-size:  130%; /* 130% x the % in body */ 
    color:   #fff; 
} 

ところで、すべては既に述べたように、私は

<meta name="viewport" ...> 

と

@viewport { 
} 

を持っている場合でも動作しません。

が適切に配置されています。

全開示のために、ウィンドウのサイズ変更時またはズームアウト/ズームイン時に寸法が変更されることはもうありません。私はGUIの変更を参照してください...

Answer 1

ああ、天のために...

body { 
    background-color: white; /* around oval */ 
    margin:   1.0em; 
    font-size:  120%; 
/* 
    min-width:  300px; // Oh ... for Heaven's Sake!!! 
*/ 
} 

はWHY分幅の排除は私のズーミングの問題を解消するん？