css - 当我说位置 :fixed, 时，我如何告诉移动浏览器我的意思？

Question

我想在我的页面顶部添加一个通知，当浏览器出现时:

• 支持媒体查询
• 是纵向的
• 对于纵向方向来说太窄了

为此，我有一个带有以下 CSS 的元素 #portrait_alert:

#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}
}

当我在我的桌面上测试它并将窗口大小更改为高于它的宽度并且小于 500 像素宽时，它工作得很好。然而，在移动浏览器上，right:0 似乎只适用于初始视口(viewport)。当我缩小 View 时，它会在右侧留下一个空隙，而当我放大时，它会溢出屏幕，因此您无法阅读。

我该如何解决这个问题？

(奖励问题:为什么我在指定 minimum-scale=1.0 时仍然可以缩小？)

Answer 1

您不能像使用 window.resize 甚至 css 宽度和高度那样捕获移动浏览器的缩放事件。原因是视口(viewport)仍然是 x 像素宽，它只是放大了，没有变大或变小。如果有人进入或离开，页面上的所有元素都将保持最初加载时的状态。这样做的原因是他们不希望程序员在用户放大时更改页面上的元素，例如调整文本大小，因为这可能会否定用户首先放大的原因。用户想要放大您的文本，当他们缩放时您不断调整文本的大小，这会很烦人吧？

尝试 jquery mobile、sencha touch、jqmobi 等。这些框架具有预置的固定位置页眉和页脚。这是一个例子 http://jquerymobile.com/test/docs/toolbars/bars-fixed.html