Размеры изображения в Chrome Developer Tools

Question

Я работаю над Учебником Mozilla по адаптивным изображениям .В части учебного пособия объясняется, как вы можете использовать адаптивную функцию дизайна инструментов разработчика браузера, чтобы видеть размеры пикселей встроенного изображения на экранах различных размеров.

В нем предлагается студентам просмотреть их демонстрационную страницу в браузере и откройте инструмент разработки адаптивного дизайна.Я использую Chrome и сделал именно это.Затем я установил размеры экрана на 320 X 480 и проверил первое изображение в теле страницы.Тем не менее, Chrome говорит, что размеры картинки 800 X 464.Как это может быть, если сам экран только 320 X 480?

Кроме того, я попробовал это в Firefox, и Firefox дает 280 X 162.4.

Итак:

1. Каковы единицы для всех этих измерений?Я предположил, что все размеры были в пикселях, но дробный пиксель на самом деле не имеет смысла.
2. При условии, что все единицы измерения одинаковы, почему изображение больше, чем экран в Chrome, и почему Chrome не согласенс Firefox?

Answer 1

Как правило, мобильные браузеры используют следующую стратегию для отображения веб-сайтов, которые не были оптимизированы для мобильных устройств: они отображают их так, как если бы они отображались на небольшом рабочем столе (т. Е. В «виртуальном окне просмотра», обычно шириной от 800 до 1000 пикселей).), а затем уменьшите результат до размера экрана мобильного устройства.Есть классическая статья Питера Пола Коха "Повесть о двух видовых экранах" (в частности, часть вторая ), которая хорошо объясняет это.

Похоже, что режим Responsice Design в Chrome devtoolsПредполагается, что это происходит, и «виртуальный видовой экран» имеет ширину 980 пикселей.Firefox не делает этого, делая виртуальный видовой экран равным фактическому размеру окна.Установка <meta name="viewport" contents="device-width"> заставляет все браузеры (включая настоящие мобильные) делать последнее.

Итак:

1. Единицами измерения являются пиксели CSS перед масштабированием.Нецелые пиксели имеют смысл для вычислений, когда браузеры отображают их, они округляются.

2. Изображение больше экрана, потому что виртуальное окно просмотра уменьшено.Это можно предотвратить, установив <meta name="viewport" contents="device-width">.

Answer 2

Инструменты разработчика Mozilla Firefox показывают вам размер изображения, который на самом деле отображается, тогда как инструменты разработчика Google Chrome отображают фактический размер изображения.

, поэтому мы не можем сказать, что ни Google Chrome, ни Mozilla Firefox не правы,они просто показывают другой размер изображения, потому что их дизайнеры решили сделать это.