What is the difference between max-device-width and max-width for mobile web

Question

I need to develop some html pages for iphone android phones  but what is the difference between max-device-width and max-width  I need to use different css for different screen size    media all and  max-device-width  400px    media all and  max-width  400px    What s the difference

User · Answer

max-width is the width of the target display area  e g  the browser  max-device-width is the width of the device s entire rendering area  i e  the actual device screen         If you are using the max-device-width  when you change the size of the browser window on your desktop  the CSS style won t change to different media query setting         If you are using the max-width  when you change the size of the browser on your desktop  the CSS will change to different media query setting and you might be shown with the styling for mobiles  such as touch-friendly menus

User · Answer

max-width refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height  Using multiple max-width  or min-width  conditions you could change the page styling as the browser is resized or the orientation changes on a device like an iPhone   max-device-width refers to the viewport size of the device regardless of orientation  current scale or resizing  This will not change on a device so cannot be used to switch style sheets or CSS directives as the screen is rotated or resized

User · Answer

max-device-width is the device rendering width   media all and  max-device-width  400px           styles for devices with a maximum width of 400px and less        Changes only on device orientation        media all and  max-width  400px           styles for target area with a maximum width of 400px and less        Changes on device orientation   browser resize        The max-width is the width of the target display area means the current size of browser

User · Answer

If you are making a cross-platform app  eg  using phonegap cordova  then   Don t use device-width or device-height  Rather use width or height in CSS media queries because Android device will give problems in device-width or device-height  For iOS it works fine  Only android devices doesn t support device-width device-height

User · Answer

Don t use device-width height anymore    device-width  device-height and device-aspect-ratio are deprecated in Media Queries Level 4   https   developer mozilla org en-US docs Web CSS  media Media features  Just use width height  without min max  in combination with orientation  amp   min max- resolution to target specific devices  On mobile width height should be the same as device-width height

User · Answer

What do you think about using this style   For all breakpoints which are mostly for  mobile device  I use min max -device-width and for breakpoints which are mostly for  desktop  use min max -width    There are a lot of  mobile devices  that badly calculate width   Look at http   www javascriptkit com dhtmltutors cssmediaqueries2 shtml           Mobile Phones Portrait          media screen and  max-device-width  480px  and  orientation  portrait        some CSS here               Mobile Phones Landscape          media screen and  max-device-width  640px  and  orientation  landscape        some CSS here               Mobile Phones Portrait or Landscape          media screen and  max-device-width  640px        some CSS here               iPhone 4  Portrait or Landscape          media screen and  max-device-width  480px  and  -webkit-min-device-pixel-ratio  2        some CSS here               Tablets Portrait or Landscape          media screen and  min-device-width  768px  and  max-device-width  1024px        some CSS here               Desktops          media screen and  min-width  1024px        some CSS here

User · Answer

the difference is that max-device-width is all screen s width and max-width means the space used by the browser to show the pages  But another important difference is the support of android browsers  in fact if u re going to use max-device-width this will work only in Opera  instead I m sure that max-width will work for every kind of mobile browser  I had test it in Chrome  firefox and opera for ANDROID

User · Answer

max-width is the width of the target display area  e g  the browser  max-device-width is the width of the device s entire rendering area  i e  the actual device screen  Same goes for max-height and max-device-height naturally

[css] What is the difference between max-device-width and max-width for mobile web?

Examples related to css

Examples related to mobile-website

Examples related to media-queries