0

ウェブサイトを設計していますが、画面の解像度に問題があります。ページを拡大縮小したいのですが、できません。

その私のウェブサイトと 21.5 inc mac 画面: (完了、問題ありません) ここに画像の説明を入力

私のラップトップ画面の解像度は1366 x 768 pxです。 ここに画像の説明を入力

CSSでこれを試しました。

body, html {height:100%;}

そしてこれはhtmlにあります。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

Doctype は: XHTML 1.0 Transitional

しかし、うまくいきません。どうすればできますか？

ありがとう！

4

3 に答える 3

2

基本的に、あなたは単純で簡単な方法で行うことはできません。

ビューポートタグとそれはすべて（現在）モバイルデバイス専用です。デスクトップブラウザとは異なる方法で、ページ全体を読み込んでその周りをパンします。

ほとんどのWebサイトは垂直方向にスクロールするように設計されているため、CSSは水平方向のストレッチに非常に適していますが、同じことを垂直方向に行うには非常に不十分です。

これを行う1つの方法は、さまざまなバージョンを設計してから、メディアクエリを使用してさまざまな高さのプロパティを変更することです。

CSSでは、これは次のようになります。

#box {
    width:100px;
    height:100px;
    background-color:red;
}

@media all and (max-height: 400px) and (min-height: 200px) {
    #box {
        background-color:green;
    }
}

これにより、画面の高さが200px〜400pxでない限り、ボックスが赤になります。画面のサイズが異なる場合は、その手法を使用してさまざまなことを行うことができます。これは最近かなりよくサポートされています。（http://caniuse.com/#feat=css-mediaqueries-基本的にIE8以下を除くすべての場所）。

もう1つの方法は、ビューポート単位（またはvhの代わりに）を使用することです。ここで、=ブラウザの高さの1％です。これは現在、非常にひどくサポートされています（http://caniuse.com/#feat=viewport-units-Firefox、Opera、IE9以降はありません）。pxem1vh

それ以外は、JavaScriptを使用して円形メニューの高さを調整し、拡大縮小することを検討しています。jQueryは、JSをまだ検討していない場合に確認するものです。

要するに、物事を簡単に保つために：

  • 垂直方向にスクロールするサイトを設計する
  • 注意深くスクロールできないサイトを設計し、600ピクセル、768ピクセル、720ピクセル、1080ピクセルの高さの画面でさまざまな動作を定義します（ここでブラウザのクロムの高さを差し引くことを忘れないでください。100〜300ピクセルの範囲で見積もることができます）
于 2012-11-04T17:00:39.553 に答える
0

html と body の高さを 100% に設定していますが、 body 内の要素の高さと幅はどうですか? それらを滑らかにしてすべての画面サイズに合わせるには、高さと幅、およびほぼすべての要素のパディングとマージンをパーセンテージで指定する必要があります。

于 2012-11-04T17:18:58.230 に答える
-1

メタタグのビューポートを試してみましたか?

 <meta name="viewport" content="width=320">
于 2012-11-04T16:46:20.970 に答える