Dev Tools Mobile Device Mode doesn't seem to respect media queries
Reported by
alexande...@gmail.com,
Mar 28 2016
|
|||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Steps to reproduce the problem:
1. View some page with media queries (in my instance a page I'm working on a responsive design for)
2. Open developer tools (Ctrl+Shift+I)
3. click "Toggle device mode" (or Ctrl+Shift+M)
4. When viewing the user agent type "Mobile (default)", see that styles from media query are not being applied (both visually and not present in inspector when focused on the elements in question)
5. Note that the styles are applied when using the other two user agent types ("Desktop" and "Desktop with touch")
What is the expected behavior?
The media query styles should be applied at the given conditions. In the case of the tested example, a query of
@media (max-width: 768px) {
#wrapper .content {
display: none;
}
}
was used. At emulated screen sizes of 768px and below however, the content portion was still visible. When changing the user agent through the ellipses menu in the top right corner of the screen the styles would be applied and the area would be hidden.
What went wrong?
Media query being used wasn't applied when given condition for query was met (see "Expected Behavior" section for explicit example). General responsive design seems to have also changed, almost like a min-width has been applied to some elements when using the mobile user agent (just looks odd now).
Did this work before? Yes Before I updated my chrome browser today. Can't guarantee it was the previous version to this one as I've not updated in probably more than a week but it used to work previously.
Chrome version: 49.0.2623.87 Channel: n/a
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0
* I am using the default CSS bootstrap with classes, etc. if that matters in this instance.
Can manually change the size of the window and see the styles displayed and the other user agent selections seem to work fine. There must be some kind of bug with the "Mobile (default)" option.
,
Apr 4 2016
Yes, an example web page would be extremely helpful. Also, does the website have meta viewport tag?
,
Apr 11 2016
,
Apr 18 2016
Closing per lack of repro scenario. Note this could be a dupe of issue 599511 . |
|||
►
Sign in to add a comment |
|||
Comment 1 by manoranj...@chromium.org
, Mar 28 2016