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 回答