2

CSS しか変更できないページでビューポートを使用する必要があります。つまり、私は HTML にアクセスできないので、有名なメタタグをそこに置くことができません。

私が見つけた唯一の可能なオプションは、

@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 2;
    zoom: fixed;
}

しかし、私は適切な結果を得ることができませんでした。デバイスを回転させても、同じ幅が保存されます。

誰が私が何を変更すべきかいくつかのアイデアを持っていますか? それともまったく可能ですか？

4

1 に答える 1

1

これを書いている時点 (Dez '13) では、CSS Device Adaption (を含む@viewport) は使用する準備ができておらず、完全なブラウザー サポートにはほど遠い状態です。そのため、CSS のみを使用して iOS のビューポートを設定することは現在できません。

ブラウザのサポート:

  • Internet Explorer 10 ( msdn.microsoft.com ) – ベンダー プレフィックス:@-ms-viewport
  • Opera Mobile 11 ( dev.opera.com ) – ベンダープレフィックス:@-o-viewport

さらに詳しい情報：

  • html5hacks.com: @-viewport CSS 宣言でページのサイズをエレガントに変更する
  • treehouse ブログ: @viewport を使用した CSS デバイスの適応
  • Bootstrap ドキュメントの時点で、Windows 8 および Windows Phone 8 の IE10 が正しく動作するには、いくつかの修正が必要です。

    Windows 8 および Windows Phone 8 の Internet Explorer 10

    Internet Explorer 10 では、デバイスの幅とビューポートの幅が区別されないため、Bootstrap の CSS でメディア クエリが適切に適用されません。通常、これを修正するには、CSS の簡単なスニペットを追加するだけです。

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

    ただし、Windows Phone 8 デバイスが狭い「電話」ビューではなくほとんどデスクトップ ビューを表示するため、これは機能しません。これに対処するには、Microsoft が修正を発行するまでバグを回避するために、次の CSS と JavaScript を含める必要があります。

    CSS:

    @-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

    JS:

    if (navigator.userAgent.match(/IEMobile/10.0/)) {
  var msViewportStyle = document.createElement("style")
  msViewportStyle.appendChild(
    document.createTextNode(
      "@-ms-viewport{width:auto!important}"
    )
  )
  document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

    詳細と使用ガイドラインについては、Windows Phone 8 と Device-Width を参照してください。

于 2013-06-12T09:10:13.760 に答える