Question

当我在手机上将方向从纵向更改为横向时，我的.site-header宽度保持与纵向相同的宽度，而我希望它适合新的浏览器宽度....

这只发生在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">

谢谢

Answer 1

如果您希望它占据设备的整个宽度（而不是容器的整个宽度），请使用width:100vw;而不是100％。

这将使视频宽度成为纵向或横向。

注意该视口单元与旧版浏览器不兼容，请点击此链接http://caniuse.com/#search=vw

Answer 2

你找到了答案吗？我在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

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

2 个答案: