3 ms·

Firefox is doing awesome work and had something similar in place a while ago. But there are some significant differences between these two. * devicePixelRatio

Firefox is doing awesome work and had something similar in place a while ago. But there are some significant differences between these two. * devicePixelRatio emulation. If you have density-dependent assets (srcset/image-set()), it'll retrieve those. You can also pinch-zoom and it'll behave like it does on the device, it's easy to see that low dpi assets are not sharp. * viewport emulation. Whatever values you have in your <meta viewport> we honor and apply the same way. * Network throttling, the interactive view of media queries, device presets, UA spoofing. Geolocation and accelerometer sensor emulations. That said, Firefox has an easy screenshot button that we like a lot and will add something similar. So you can get a png of your site, but within the actual device. Maybe a nice shadow underneath. Something to drop into an email and send around. :)

richbradshaw 12y ago
Do you know when the new iPhones will be added to the devices menu? Or whether we will be able to save devices and curate the list? I'd like to add 1080p and 720p screens into the list for some tv screen sized apps I'm building, and to be able to star some of the more common devices while demoting some of the less common ones.
- paulirish 12y ago
  We'll add the new iPhones as soon as we confirm their metrics and UA; should be this week. You can already save custom presets. A better UI is coming, but right now. click the "…" icon on the right to expand the full emulation menu. Then set your UA or device metrics and click Save As. http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6 http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6
likeclockwork 12y ago
How do you pinch zoom with a mouse?
- paulirish 12y ago
  Shift+drag. :) https://developer.chrome.com/devtools/docs/device-mode https://developer.chrome.com/devtools/docs/device-mode
  - likeclockwork 12y ago
    Thank you! Paul Irish responded to me. swoons

richbradshaw 12y ago

Do you know when the new iPhones will be added to the devices menu? Or whether we will be able to save devices and curate the list? I'd like to add 1080p and 720p screens into the list for some tv screen sized apps I'm building, and to be able to star some of the more common devices while demoting some of the less common ones.

paulirish 12y ago
We'll add the new iPhones as soon as we confirm their metrics and UA; should be this week. You can already save custom presets. A better UI is coming, but right now. click the "…" icon on the right to expand the full emulation menu. Then set your UA or device metrics and click Save As. http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6 http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6

likeclockwork 12y ago

How do you pinch zoom with a mouse?

paulirish 12y ago
Shift+drag. :) https://developer.chrome.com/devtools/docs/device-mode https://developer.chrome.com/devtools/docs/device-mode
- likeclockwork 12y ago
  Thank you! Paul Irish responded to me. swoons