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

Question

Какая разница (в простом выражении) между высотой и шириной, шириной устройства и высотой устройства?

Answer 1

device-width - это ширина ...

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

Источник .

width ...

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

Источник .

Answer 2

Более поздний ответ Надеется, что это поможет Кто-то

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

с developer.mozilla.org ,

ширина:
Значение: СМИ: визуальное, тактильное
Принимает мин / макс префиксы: да

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

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

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

Answer 3

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

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

или если вы определяете width, что означает, что ваш конкретный 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/

Answer 4

Если вы создаете кроссплатформенное приложение (например, используя phonegap / cordova), тогда

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

Answer 5

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

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

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

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