Question

我想在浏览器显示的页面顶部添加一条通知：

支持媒体查询
处于纵向方向
纵向工作范围太窄

为此，我有一个元素#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时仍会缩小？）

Answer 1

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

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

当我说位置：固定时，我如何告诉移动浏览器我的意思呢？

1 个答案: