How can mobile browser change screen width?

Media Queries: In what situations would you use width vs. device-width?

• From what I understand "width" is the width of the viewport (browser on desktops) and "device-width" is the width of the screen. Are there cases where you would specifically test them separately? Or is it safe to always use one or the other? If so, which is better? The thing that confuses me is the fact that "device-width" on an iPhone would be its portrait width, which means if it wouldn't detect if the user was holding it in landscape mode, correct? So using "width" would be more accurate in that case? If so, why use "device-width" at all?

• Answer:

  It is horrendously confusing, but I think it goes something like this: ---------------------------------------- Setting device-width and other variables in the viewport meta tag of your page will stop the smartphone browser automatically scaling your page. <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> It doesn't matter if the device is in portrait or landscape, this just means that the browser won't assume that the page is a default, desktop-sized page.  This is important when you have specifically designed your page for use in a mobile browser, otherwise your nice big touch-screen buttons on your smartphone-sized page would be shrunk into the top left-hand corner of the browser because the browser would think there was loads more on the page which it needed to squeeze onto the screen. ---------------------------------------- In CSS, you can use the device-width value.  For example (stolen from someone else on the web): 123@media only screen and (device-width: 768px) and (orientation: landscape) {   /* rules for iPad in landscape orientation */ } This can give you flexibility to set up different CSS rules for various specific devices (by using hacks to figure out which device is being used).  Again, the portrait and landscape thing won't matter here because you're just using device-width to sniff out the device, not as an actual value for calculating lay-out positions etc. ---------------------------------------- If you want to work out the actual dimensions of the working viewport then you can use Javascript to get the client width and height, as you suggested. jQuery or a similar library will help greatly with this as they already have all the quirks figured out and you can just use something like $(window).width() and $(window).height() without having to handle different browser values.