Разница между шириной и шириной устройства в CSS-запросах

Ответ 1

device-width - это...

ширина выходного устройства (что означает весь экран или страницу, а не только область визуализации, например окно документа).

Источник.

width...

описывает ширину поверхности отображения выходного устройства (например, ширину окна документа или ширину окна страницы на принтере)

Источник.

Ответ 2

Больше, чем поздний ответ. Надеюсь, что это поможет кому-то.

В средах CSS разница между шириной и шириной устройства может быть бит путается, поэтому давайте немного разъясним это. ширина устройства относится к ширины самого устройства, другими словами, разрешение экрана устройства. Допустим, ваше разрешение экрана составляет 1440 x 900. означает, что экран имеет 1440 пикселей в поперечнике, поэтому он имеет ширину устройства 1440px. Большинство мобильных телефонов имеют ширину устройства 480 пикселей или ниже, включая популярный iPhone 4 (с шириной устройства: 320 пикселей), несмотря на это технически имея разрешение 640 x 960. Это связано с iPhone 4's сетчатый дисплей, который заполняет два пикселя устройства в каждом пикселе CSS на экран. Это справедливо и для Ipad 3; его сообщения ширина устройства составляет 768 пикселей, как и его предшественники, хотя его фактическое разрешение экрана 1536px x 2048px. В целом ширина больше универсальный, когда дело доходит до создания чувствительных веб-страниц, хотя ширина устройства полезна, когда вы хотите специально настроить таргетинг на мобильный устройства (а не настольные компьютеры с небольшим окном браузера, например)

от developer.mozilla.org ,

ширина:
Значение: носитель: визуальный, осязаемый
Принимает префикс min/max: yes

Средство ширины носителя описывает ширину поверхности визуализации устройства вывода (например, ширины окна документа или ширину окна страницы на принтере).

Примечание. По мере того, как пользователь изменяет размер, браузер окон переключает таблицы стилей, если это необходимо, на основе медиа-запросов с использованием средств ширины и высоты.!!!

Я нашел эту статью очень интересной из javascriptkit: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Ответ 3

Если вы определяете device-width, ваш конкретный css является вызовом при открытии вашей страницы в iphone, ipad, ipod и мобильном устройстве. например:

@media only screen and (max-device-width:480px){
        body{
          color:red;
        }
    }

или если вы определяете ширину, что означает, что ваш конкретный css является вызовом, когда ваше окно изменяет размер. например:

@media only screen and (min-width: 481px) and (max-width: 1024px) {
        body{
         color:yellow;
        }
    } 

для получения дополнительной информации, пожалуйста, проверьте http://webdesignerwall.com/tutorials/css3-media-queries, http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/

Ответ 4

Если вы делаете кросс-платформенное приложение (например, с помощью phonegap/cordova),

Не используйте ширину устройства или высоту устройства. Скорее используйте ширину или высоту в запросах на мультимедийные запросы CSS, поскольку Android-устройство даст проблемы в ширине устройства или высоте устройства. Для iOS он отлично работает. Только устройства Android не поддерживают ширину устройства/высоту устройства.

Ответ 5

device-width описывает высоту устройства вывода (что означает весь экран или страницу, а не только область визуализации, например окно документа).

В то время как свойство height CSS определяет высоту области содержимого элемента. Область содержимого находится внутри отступов, границы и поля элемента.

Источник: https://developer.mozilla.org/en/CSS/

Подробнее о медиа-запросах см. http://www.w3.org/TR/css3-mediaqueries/