我正在网页上使用alertify.js发出用户错误警告,例如“无效密码”等.但是,在使用移动浏览器时,我想在其屏幕顶部而不是页面顶部显示警告.即使在开放式键盘上方也可以.在CSS中,有人知道该怎么做吗？

这就是我现在使用的.但这使它离页面顶部10px.如果用户向下滚动,则无法看到它.如果将键盘打开,则将它们留在底部,它就会藏在它的后面.

.alertify-logs {
    top: 10px;
    right: 10px;
}

编辑：
键盘实际上是将页面顶部移到更高位置,因此地址栏隐藏了警报.在开放式键盘将其推向更高位置的同时,在CSS中添加固定位置似乎正在发挥作用.

我的解决方案：

var isMobile = false;
//test for mobile device/browser
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
    isMobile = true;
}

当输出一些错误消息时：

if(isMobile){
    //get top of viewable screen y-coordinate
    var scrollY = window.pageYOffset;
    //output error
    alertify.error("Password is incorrect.");
    //adjust error placement
    $(".alertify-logs").css("top", scrollY+"px");
}

错误消息的这种移动之所以有效,是因为它在移出页面之前会在屏幕上停留几秒钟.

解决方法:

首先是要确定浏览器是否是移动浏览器,或者现在可以通过CSS媒体查询或细长javascript来完成. Javascript更好.设置窗口大小调整事件监听器,并使用javascript innerWidth或innerHeight.
 < div id =“ bar”>在此放置内容< / div>

CSS：

#bar
{
Position:fixed;
Left:0;
Right:0;
Top:0;
Height:2em;
}

告诉我这是否行不通,我将做更多的工作.希望这可以帮助.