Css 在Android默认浏览器上更改手机方向后,位置固定不变

Css 在Android默认浏览器上更改手机方向后,位置固定不变,css,mobile,viewport,Css,Mobile,Viewport,当我在手机上将方向从纵向更改为横向时,我的。网站标题的宽度保持与纵向相同,但我希望它适合新的浏览器宽度 这只发生在Androids互联网浏览器中 .site-header { position: fixed; width: 100%; z-index:9999999; -webkit-transform: translateZ(0); } 我正在使用这个作为我的视口 <meta content="width=device-width, initial-scale=1, user-

当我在手机上将方向从纵向更改为横向时,我的
。网站标题的宽度保持与纵向相同,但我希望它适合新的浏览器宽度

这只发生在Androids互联网浏览器中

.site-header {
position: fixed;
width: 100%;
z-index:9999999;
-webkit-transform: translateZ(0);
}
我正在使用这个作为我的视口

    <meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport"> 


谢谢

如果您想让它占据设备的全宽(而不是容器的全宽),请使用
宽度:100vw而不是100%

这将使其采用视口宽度,无论是纵向还是横向


注意视口单元与旧浏览器不兼容,请检查此链接

找到答案了吗?我在Safari浏览器的ipad上也有同样的问题。从纵向旋转到横向时,任何宽度为100%的非固定位置项目都将扩展以填充屏幕,但宽度为100%的固定位置项目将保持768px的宽度

我只是在使用youtube api时才遇到这个问题,但我不确定它是因为冲突,还是仅仅因为该api占用了大量资源。有时,但并非总是,几秒钟后,页面最终会在我滚动时重新调整宽度

我投入了一些技巧来修复它,因此如果您发现了更好的方法,请告诉我:

$(function() {//on page load
  window.onorientationchange = function(){//on device rotate
    $(".myfixeddivs").width($(window).width());//manually adjust widths
  }//end on device rotate
});//end on page load

你有没有检查过你的网站标题不在固定宽度的容器内,对吗?是的,没有任何东西给它一个固定的宽度,我现在正在给帖子添加一个更新,结果发现这只发生在Androids默认浏览器中,也许这会让解决问题变得更加困难视口单元并不是真的与所有浏览器兼容近60%=>@Dev'Hamz,没错,我编辑了我的答案。。谢谢