3

モバイル デバイス、特にタブレット用の Web サイトを作成しています。ビューポートを設定するには、meta タグを使用してズームの範囲を制御しています。

<meta name="viewport" content="width=device-width, maximum-scale=1.8, minimum-scale=0.63"/>

現在、Windows サーフェス上の IE10 が Meta Tag を無視するという問題に直面しているため、CSS ルールを使用してビューポートを設定しようとしました。残念ながら、私が試したコードは機能していません:

@-ms-viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}
@viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}

これは私のCSSファイルからのものです。私はメディア クエリを初めて使用するので、コードが正しいのか、それとも構文などに間違いがあるだけなのかわかりません。私も試しました：

@media all{
@-ms-viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}
@viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}}

どちらも機能しません。では、Surface のズーム範囲を制御するための解決策はありますか? または、誰かが私が犯している間違いを見ていますか?

4

2 に答える 2

3

次のタグを使用して解決した Surface タブレットで新しいレスポンシブ サイトをテストしたときに、同様の問題が発生しました。

@-ms-viewport { width: device-width; }

ただし、初期スケールと最大スケールは 1 に設定されており、変更するつもりはありません。

ここで@ms-viewportのMSDNドキュメントを見るhttp://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx設定をサポートしていないようですビューポート ルールを使用してスケールとズームを調整するため、これを変更できない場合があります。

これらは、ドキュメントに従って標準の @viewport ルールhttp://www.w3.org/TR/css-device-adapt/#the-viewport-ruleでのみ設定できます。どのブラウザーがそれらをサポートしているかはまだわかりません。

于 2013-03-05T13:36:00.070 に答える