Menu
To implement mobile website it would be useful to set max-device-width in my browser. I know plugins to fake the user-agent. It this also possible for the max-device-width? I would prefer to use a regular browser like Firefox, IE, Opera, ... instead of all kind of mobile browser emulators or even different smartphones.
Thanks, Ropo
568
With CSS media queries you can use max-device-width to target a device width (such as an iPhone or Android device) and/or a max-width that targets a page width. If you use max-device-width , when you change the size of the browser window on your desktop, the CSS won't change, because your desktop doesn't change size.
You can get the device screen width via the screen. width property. Sometimes it's also useful to use window. innerWidth (not typically found on mobile devices) instead of screen width when dealing with desktop browsers where the window size is often less than the device screen size.
Chrome allows you to set device metrics, which are used in the media queries calculation for device width. To do that, open Developer Tools, click the gear icon on the lower right corner, and go to the Overrides tab.
Edit Jan. 17, 2014: Chrome now has an Emulation tab, that can be found alongside Console, in Developer Tools.
158
In the common case desktop browsers can be used for sanity checks of html & css, but mobile browsers are very different in the html, css and javascript processing.
To "emulate" max-device-width you can replace max-device-width with max-width and resize your browser window to required size (actual versions of browsers supports max-width media-query instruction).
We use desktop browsers at the early stages of mobile web interface development and emulators in late. UI testers use real devices only.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
