当我说位置:固定，我如何告诉移动浏览器我是认真的？

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 my宽。然而，在移动浏览器上，right:0似乎只适用于初始视图端口。当我缩小视图时，它会在右边留下一个空白，而当我放大它时，它会溢出屏幕，这样你就无法阅读它。

我怎么才能解决这个问题？

(额外的问题是:当我指定minimum-scale=1.0时，为什么还可以放大？)

Answer 1

您不能像使用window.resize甚至css宽度和高度那样捕获移动浏览器的缩放活动。原因是视口仍然是x像素宽，它只是放大，而不是更大或更小。如果有人插入或退出，页面上的所有元素都会停留在最初加载的状态。这样做的原因是他们不希望程序员在用户放大时更改页面上的元素，例如调整文本大小，因为这可能会否定用户最初放大的原因。用户希望放大您的文本，当他们缩放您不断调整文本大小时，可能会很烦人，对吗？

尝试jquery、sencha touch、jqmobi等。这些框架已经预先构建了固定位置标头和页脚。下面是一个示例http://jquerymobile.com/test/docs/toolbars/bars-fixed.html