DevTools: device toolbar doesn't trigger style changes
Reported by
dilillo....@gmail.com,
Jul 7 2017
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Steps to reproduce the problem: 1. create a simple html project with 2 different css triggered by the link tag when screen size changes (E.g. < 600 and >600) 2. open the html file in chrome 3. open the devtool 4. click on device toolbar icon 5. use media-query or predefined mobile buttons to try to trigger the the stylesheet change What is the expected behavior? style change according to style, like it happens resizing the browser window What went wrong? it doesn't trigger the style sheet change. check gif posted here: https://github.com/google/WebFundamentals/issues/4761#issuecomment-313526285 Did this work before? No Chrome version: 58.0.3029.110 Channel: n/a OS Version: 17.04 Flash Version:
,
Jul 10 2017
,
Jul 13 2017
This might be due to min-width: 980px enforced by browser when it thinks the page is not mobile-optimized. Try adding <meta name="viewport" content="width=device-width, initial-scale=1"> or using "{min,max}-device-width" in the media query instead of "{min,max}-width".
Closing as working as intended. Please comment here if above suggestions do not help, I will reopen.
,
May 4 2018
thanks @dgozman adding the meta tag fixed the issue |
|||
►
Sign in to add a comment |
|||
Comment 1 by nyerramilli@chromium.org
, Jul 10 2017