为了账号安全,请及时绑定邮箱和手机立即绑定

响应式设计模式在屏幕旋转后没有为 window.innerWidth 返回正确的值

响应式设计模式在屏幕旋转后没有为 window.innerWidth 返回正确的值

开心每一天1111 2022-10-27 15:42:29
这是一个Firefox错误还是我搞砸了?如果我在真实设备(例如 Android)上使用 chrome 甚至 Firefox,没有问题,它似乎只影响 Firefox 的响应式设计模式。这是复制问题所需的完整代码:<html><head><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/></head><body><script>var pageInPortraintMode;// Prevent keyboard from squeezing the entire UIaddEventListener("load", function() {  pageInPortraintMode = window.innerHeight > window.innerWidth;  document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");})// Listen to window resizes to detect orientation changeswindow.addEventListener("resize", windowSizeChanged);function windowSizeChanged() {  alert(window.innerWidth + "x" + window.innerHeight);  if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (window.innerHeight > window.innerWidth))) {    pageInPortraintMode = window.innerHeight > window.innerWidth;    document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");  }}</script><div style="width:100%; height:100%; background-color:#000; position:fixed; left:0; top:0"></div></body></html>要复制进入响应式设计模式 (Ctrl+Shift+M),请加载 html,然后按“旋转视口”按钮。
查看完整描述

1 回答

?
ABOUTYOU

TA贡献1812条经验 获得超5个赞

看来这是一个可重现的 Firefox 错误 https://bugzilla.mozilla.org/show_bug.cgi?id=1650024


查看完整回答
反对 回复 2022-10-27
  • 1 回答
  • 0 关注
  • 96 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信