Яка різниця між максимальною шириною пристрою та максимальною шириною для мобільного Інтернету?

Мені потрібно розробити кілька html-сторінок для iphone / android телефонів, але в чому різниця між max-device-widthі max-width? Мені потрібно використовувати різні css для різного розміру екрана.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

Яка різниця?

max-width - ширина цільової області відображення, наприклад, браузера

max-device-width - ширина всієї області візуалізації пристрою, тобто фактичний екран пристрою

Те саме стосується max-heightі max-device-heightприродно.

max-widthвідноситься до ширини вікна перегляду і може використовуватися для націлювання на конкретні розміри або орієнтації спільно з max-height. Використовуючи кілька max-width(або min-width) умов, ви можете змінити стиль сторінки, коли розмір веб-переглядача змінюється або змінюється орієнтація на пристрої, як iPhone.

max-device-widthвідноситься до розміру вікна перегляду пристрою незалежно від орієнтації, масштабу струму або зміни розміру. Це не зміниться на пристрої, тому його не можна використовувати для перемикання таблиць стилів або директив CSS, коли екран повертається чи змінюється розмір.

Що ви думаєте про використання цього стилю?

Для всіх точок прориву, які в основному використовуються для "мобільних пристроїв", min(max)-device-widthі для точок зупинки, які в основному використовуються для настільних ПК min(max)-width.

Існує маса "мобільних пристроїв", які погано обчислюють ширину.

Подивіться на 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 */
}

max-device-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 */
}

Максимальна ширина - ширина цільової області відображення означає поточний розмір браузера.

Різниця полягає в тому, що максимальна ширина пристрою - це вся ширина екрана, а максимальна ширина означає простір, який використовується браузером для показу сторінок. Але ще одна важлива відмінність - це підтримка браузерів Android, адже якщо ви збираєтесь використовувати максимальну ширину пристрою, це працюватиме лише в Opera, натомість я впевнений, що максимальна ширина працюватиме для будь-якого мобільного браузера ( Я перевірив це в Chrome, firefox та opera для ANDROID).

max-width - ширина цільової області відображення, наприклад, браузера; Максимальна ширина пристрою - це ширина всієї області візуалізації пристрою, тобто фактичний екран пристрою.

• Якщо ви використовуєте максимальну ширину пристрою , під час зміни розміру вікна браузера на робочому столі стиль CSS не змінюватиметься на різні параметри медіа-запитів;

• Якщо ви використовуєте максимальну ширину , під час зміни розміру веб-переглядача на робочому столі CSS зміниться на різні параметри медіа-запитів, і вам можуть бути показані стилі для мобільних пристроїв, наприклад, зручні для дотику меню.

Якщо ви робите кросплатформенний додаток (наприклад, за допомогою phonegap / cordova),

Не використовуйте ширину пристрою або висоту пристрою. Швидше використовувати ширину або висоту в запитах медіа CSS, оскільки пристрій Android буде створювати проблеми з шириною пристрою або висотою пристрою. Для iOS це чудово працює. Тільки пристрої Android не підтримують ширину / висоту пристрою.

Більше не використовуйте ширину / висоту пристрою.

ширина пристрою, висота пристрою та співвідношення сторін-пристроїв застаріли в медіа-запитах 4-го рівня: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Просто використовуйте ширину / висоту (без хв / макс) у поєднанні з орієнтацією та (хв / макс.) Роздільною здатністю для націлювання на конкретні пристрої. На мобільних ширина / висота повинні бути такими ж, як ширина / висота пристрою.