2

さて、私はこれに数時間頭をぶつけていたので、ここでそれを投げて、誰かが助けることができるかどうか見てみましょう:

基本的な問題は、HTML ページに SVG があり、応答性が高く、ブラウザー ウィンドウの幅に合わせて調整されていることです。コードは IE と Chrome の両方で問題なく動作しますが、Firefox では、ウィンドウが特定のサイズよりも小さくなると、SVG のスケーリングが停止します。ちゃんとスケールアップします。私を激怒させるために、Firefoxで「要素を検査」してコードをチェックアウトすると、SVGが適切にサイズ変更されて、現在の小さな表示領域に収まるように見えます。ここに私が意味することのいくつかのスクリーンショットがあります:

Chrome で動作する SVG

Firefox で SVG が機能しない

Firefox の「Inspect Element」ビューの SVG

基本的なコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Glynne McReynolds</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
<header>
    <img src="images/glynne-mcreynolds.svg" alt="Glynne McReynolds" title="Glynne McReynolds">
</header>
</body>
</html>

そして関連する CSS:

header {
    max-width: 500px;
    text-align: center;
    margin: 0px auto;
}
header img {
    width: 100%;
    height: auto%;
}

なお、modernizr.js の開発ビルドも含めていますが、削除しても変わらないので省略しました。

私が試したこと：

  • SVG から幅と高さの宣言を削除します。
  • imgSVG をタグではなくオブジェクトとして埋め込む。

また、ここにコードのフィドルがあり、ここにSVGがあります。どんな助けでも大歓迎です。

4

1 に答える 1

2

Firefox のスクリーンショットは、ウィンドウがブラウザー UI よりも狭いことを示しています (カットオフ ツールバーに注意してください)。そのため、ビューポートは実際にはウィンドウよりも広くなります。

ロバートが上で述べたように、UI が特定のポイントを超えて縮小できないのは、多くの場合、柔軟性のない要素を UI に追加するアドオンが原因です....

于 2012-12-09T03:59:08.130 に答える