Chrome开发者工具显示的屏幕大于我在响应模式下设置的屏幕 [英] Chrome Developer Tools displaying screen larger than I set in responsive mode

问题描述

我正在使用chrome开发人员工具，并打开了响应模式.将宽度和高度设置为移动尺寸(320 x 568、360 x 640等).

未加载对移动设备的媒体查询. jQuery和chrome开发工具中的size-helper都显示980px的宽度，比我设置的要大得多.

其他信息:我将网页放在部署服务器中，并且还使用了chrome扩展程序作为模拟器，因为我不相信Chrome的措施.

在部署服务器中，它以某种方式像chrome一样工作(因此代码中可能有些奇怪)，但是在模拟器插件中并调整chrome窗口的大小(不使用响应工具)，我可以看到到达断点. /p>

有人遇到过这个问题吗? 谁能至少解释一下为什么chrome忽略了我要求的尺寸?

解决方案

您可能需要包括:

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

在html文件的顶部...

I'm on chrome developer tools and opened the responsive mode. Set the width and height to mobile size (320 x 568, 360 x 640, things like that).

Media queries to mobile are not getting loaded. Both jQuery and the size-helper in the chrome dev-tools shows 980px of width, much larger than I set.

Extra info: I put my webpage in a deploy server and also used a chrome extension as a emulator because I couldn't trust the Chrome's measures.

In the deploy server it somehow works like chrome (so there is probably something weird with the code), but in the emulator plugin AND resizing the chrome window (without using the reponsive tools) I can see my breakpoints getting reached.

Anyone has faced this problem before? Can anyone at least explain why chrome is ignoring the size I ask it to be?

解决方案

You may need to include:

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

At the top of your html file...

这篇关于Chrome开发者工具显示的屏幕大于我在响应模式下设置的屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！