【问题标题】:Chrome Dev Tool Shrinks screen when inspecting an elementChrome 开发工具在检查元素时缩小屏幕
【发布时间】:2018-10-25 17:53:24
【问题描述】:

我正在创建一个开发者。网站最终替换现有网站,每次我检查一个元素时,页面的主体都会缩小到页面左半部分的三分之一。它也随机发生在滑块上,图像有时只显示在页面的一半上。如果我刷新页面,它会更正它,直到我再次检查一个元素。这使得在这个网站上工作变得不可能,我已经禁用了这个主题并进入了一个股票主题以及一个一个被禁用的插件,试图找出导致这个故障的原因,我还没有确定是什么导致了这个问题。我该如何解决?

【问题讨论】:

  • 也许你可以附上截图。它可能是您代码中的 CSS 内容,也可能是移动视图之一。如果您将开发工具取消停靠到不同的窗口,它会这样做吗?
  • 它不允许我上传屏幕截图,但如果你去 dev.resolvly.com 并检查一个元素,你会明白我的意思

标签: google-chrome-devtools inspect


【解决方案1】:

您可能拥有开发工具模拟器,它可以帮助您模拟不同设备尺寸的网页。尝试通过单击关闭模拟器。

【讨论】:

  • 不是模拟器。页面标题保持全宽,只是页面主体缩小到屏幕的三分之一
  • 感谢您的链接。快速扫描站点,看起来在调整窗口大小时可能会发生一些影响样式的逻辑。尝试检查 javascript 文件。
【解决方案2】:

如果您使用的是 chrome 开发工具(假设 dev-tools 窗口与 chrome 分开打开,而不是在同一个窗口中),我猜您的设备工具栏可能会被切换。

单击此按钮可将其关闭,因为它用于在不同的屏幕尺寸上测试您的网站,并且在您检查某些内容时可能会缩小您的屏幕。

【讨论】:

  • 不,它不是模拟器,因为它没有缩小整个页面,它只是缩小了页面的主体。标题保持全屏显示。
  • 使用您在上面评论中提供的链接,无需打开开发工具即可重现该问题。检查员与此无关。如果将窗口大小调整到某些点,它会缩小主体。给.grve-content {width:100%} 为我解决了这个问题(;
  • 我试过了,但在某些尺寸以及每次检查时它仍然在做同样的事情。
  • 我刚刚删除了我所有的自定义 CSS,看看它是否覆盖了某些东西,它仍然有同样的问题。我不确定还有什么可能导致此问题
  • 谢谢。您的评论让我走上了正轨,我想我通过添加#grve-content {width:100%} 来解决它
猜你喜欢
  • 1970-01-01
  • 2021-08-29
  • 2014-05-18
  • 1970-01-01
  • 2015-01-29
  • 2015-03-24
  • 1970-01-01
  • 1970-01-01
  • 2020-10-14
相关资源
最近更新 更多