question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] device* media queries are not triggered with viewport emulation

See original GitHub issue

If you want to test sites with media queries, setting the viewport is not enough.

I’ve found that I also need to change the window size to accommodate media queries and accurately reflect what a user would see with certain screen sizes

await chromium.launch({args: [ –window-size=${someWidth},${someHeight}]});

That’s easy enough thanks to your helpful device dictionary.

Am I missing something here?

Is it possible to change the default window size on all browser instances launched by Playwright?

Failing that, are there comparable flags for Firefox and Webkit?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
dgozmancommented, Apr 1, 2020

I believe this is now fixed in all browsers 🎉

0reactions
dgozmancommented, Apr 1, 2020

#1565 fixed this for Firefox.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chrome Device Mode Emulation Media Queries Not Working
I fixed this problem by adding a meta tag to my page: <meta name="viewport" content="width=device-width">. UPDATE (December 2019):.
Read more >
5 Reasons Why Your CSS Media Queries Are NOT ... - YouTube
... are not working ? CSS Media queries are an important part of Responsive web design but sometimes they don't work as we...
Read more >
Media Query Works in Browser but not in mobile - Treehouse
Hi everyone! I am having a problem with my mobile stylesheet. When I resize my browser in Chrome, all of my responsive design...
Read more >
Viewport and media query based preloading | by Francis John
The desktop image is being preloaded on chrome's mobile emulator (at a device width of 375px). To double check the media query is...
Read more >
Emulate CSS media features - Chrome Developers
Under the Emulate CSS media feature prefers-color-scheme , select one of the following from the dropdown list: No emulation; prefers-color- ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found