1

ブラウザのときに表示されるページの上部に通知を追加したい：

  • メディアクエリをサポート
  • 縦向きです
  • 縦向きには狭すぎて機能しません

この目的のために、私は#portrait_alert次のCSSを持つ要素を持っています：

#portrait_alert {
    display:none;
    position:fixed;
    font-size:8pt;
    top:0;
    left:0;
    right:0;
    /* a few more styles such as background, text color, etc. */
}
@media all and (orientation:portrait) and (max-width:500px) {
    #portrait_alert {display:block}
}

デスクトップでテストし、ウィンドウサイズを幅よりも高く、幅が500px未満に変更すると、問題なく機能します。ただし、モバイルブラウザでは、right:0は最初のビューポートにのみ適用されるようです。ビューを縮小すると右側にギャップが残り、拡大すると画面がオーバーフローして読めなくなります。

どうすればこれを修正できますか？

（ボーナス質問：指定したときにズームアウトできるのはなぜminimum-scale=1.0ですか？）

4

1 に答える 1

0

window.resizeやcssの幅と高さのように、モバイルブラウザのズームアクティビティをトラップすることはできません。その理由は、ビューポートの幅がまだxピクセルであり、拡大または縮小されていないためです。誰かが急降下したり、急降下したりしても、ページ上のすべての要素は最初に読み込まれたままになります。この理由は、ユーザーが最初にズームインした理由を否定する可能性があるため、ユーザーがズームインしたときにプログラマーがページ上の要素を変更することを望まないためです。たとえば、テキストのサイズ変更などです。ユーザーがあなたのテキストを拡大したいと思っていました。彼らが拡大すると、あなたはテキストのサイズを変更し続けます。

jquery mobile、sencha touch、jqmobiなどを試してください。これらのフレームワークには、固定位置のヘッダーとフッターが事前に構築されています。これが例ですhttp://jquerymobile.com/test/docs/toolbars/bars-fixed.html

于 2012-08-20T19:15:09.057 に答える