Вадим Белкин

Используйте какой-нибудь оптимизатор стилей.
Можно найти сервис, например, либо если стили собираются сборщиками найти подобный плагин для вашего сборщика, например csso

Сам мучался с этой проблемой. На iOS клавиатура никак не влияет на размер окна и вьюпорт. Она просто открывается поверх окна и страницу при этом может как бы проскроллить вверх если место куда вводится текст находится в том месте где появится клавиатура. Причем скроллится на страница (html, body теги), а фиг знает что, т.к. событие скролла не отлавливалось.
Пришлось выкручиваться так, я отлавливал событие фокус на полях ввода (вообще на всем что вызывает открытие клавиатуры), и по setTimeout в 500ms (клавиатура появлялась плавно и можно было правильно вычислить её размер только после открытия) выполнял следующее

const innerHeight = window.innerHeight;
document.body.style.height = innerHeight + 'px';
document.documentElement.style.height = innerHeight + 'px';
window.scrollTo(0, 0); // вообще по-хорошему тут к нужному элементу нужно скроллить, нули я для примера поставил

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

Ну и соответственно при закрытии клавиатуры (blur того же поля) нужно примененные стили сбрасывать

document.body.style.height = '';
document.documentElement.style.height = '';

Можно подробнее про требования, для чего и как это будет использоваться?
Мне пока на ум пришла идея только с распоркой в виде картинки с нужными пропорциями, минимального размера и максимально ужатого качества, например белые jpg/png размерами 16x9px и 4x3px которые по высоте 100% и с автоматической шириной и сделанные невидимыми, а самим блокам задаем высоту и делаем их инлайн блоками. Задав фиксированную высоту блоку картинка находящаяся внутри растягивается на всю высоту блока и её ширина увеличивается пропорционально, растягивая сам блок по ширине на пропорции картинки. Плюс внутри можно создать доп.блок для размещения контента растянув и отпозиционировав его поверх всего.
Пример

Могли бы вы приложить скриншот? У меня ваш пример отображается нормально. Вы же про круг чекнутой радиокнопки? Неровное выравнивание может быть из-за того что сам символ круга имеет нечетные размеры, а контейнер относительно которого он выравнивает - четные. Отсюда и смещение в 1 пиксель. Символ который вы используете в чекнутой радиокнопке размером не 30px, 30 - это размер текста, а размер данного символа меньше, фактический размер этого символа как раз и может быть нечетным

Все зависит на сколько важен для заказчика пиксель перфект и насколько дизайнер ответсвенно подошел к отрисовке макета. Если у пунктов списка слева один отступ, а справа другой - это не косяк дизайнера, с чего вы решили что отступы обязательно должны быть одинаковые со всех сторон. Другое дело когда список из одинаковых элементов и у пунктов могут отличаться отступы с одной и той же стороны - тут уже стоит выяснить почему так.
Хорошо когда дизайн-система продумана от и до, систематизированы все отступы и размеры, такие макеты в пиксель перфект верстать легко. Но другое дело когда в разных макетах есть погрешности в размерах одних и тех же компонентов, а заказчик требует пиксель перфект ну потому-что ему так хочется и проверять соответствие для него легко.
Просто научитесь оценивать сложность верстки по макетам для пиксельного соответствия и уже сами решайте стоит ли овчинка выделки (если конечно у вас есть возможность отказываться от заказов)

Смотря какая анимация вам нужно и что под анимацией вы подразумиваете.
Кто-то путает анимацию с плавными переходами между состояниями (CSS transition), в этом случае обходится все без библиотек, вы указываете стили элемента в одном состояние и указываете какие свойства должны плавно меняться, затем пишите стили для другого состояния где изменены плавноизменяемые свойства. При изменении состояния будет плавное изменение свойств.
Есть именно CSS animation, где вы описываете саму анимацию и применяете её к нужным элементам. Есть разные библиотеки с наборами анимаций которые вы можете использовать у себя просто подключив или скопировав себе стили самой анимации и применив её в нужном месте. Например
Бывают случаи когда анимация может создаваться динамически в зависимости от положения элемента, координат клика и прочих изменяемых и вычисляемых параметров. В таких случаях можно комбинировать JS и CSS для получения нужного результата, на JS вычисляете необходимые параметры и на их основе либо задаете свойства для анимации или плавных переходов.

Если фактическая ширина экрана в пикселях у вас 1125 и Device Pixel Ratio = 3, то делите фактическую ширину на ratio и получите ширину которую будет браузер как бы эмулировать.
Т.е. если вы используете указанный метатег и добавите на страницу два блока с фиксированными ширинами , один 1125, а второй 375, то первый блок выйдет за границы экрана и появится горизонтальный скролл, а второй блок будет ровно по ширине экрана

EDGE поддерживает флексы, IE поддерживает флексы с 10 версии, но с префиксами (поможет автопрефиксер). Но в IE есть особенности использования флексов, связанны с размерами элементов флекс-контейнера. Просто верстать под Хром и надеяться что в IE автопрефиксер все сделает как нужно не стоит, есть шанс что результат вас удивит. По этому рекомендую проверять сразу все наработки связанные с флексами

Вам нужно растянуть контейнер на весь экран, самый простой вариант это ширина 100%, затем сами слайды так же должны быть на весь экран - так же 100% ширина. А следующий шаг это сделать слайды в одну строку и скрыть те что не умещаются - тут вариантов несколько, можно на флексах с запретом переноса (он по-умолчанию), можно на инлайн блоках с запретом переноса.

Обычно все эти доп.контролы сделаны через псевдоэлементы. В каждом браузере они могут называться по разному и обычно с префиксом данного браузера.
Пример
В хроме и вебкитовых браузерах отключается через псевдоэлемент ::-webkit-clear-button, а для Firefox не знаю к сожалению, вроде как поддержка type="date" в мозиле появилась не так давно, по этому информации о её контролах я не нашел

Пример. Подобный результат нужен?
1. Создаете адаптивную сетку
2. Для картинок добавляете обертку с трюком для пропорциональных размеров через вертикальный padding и располагаете картинку внутри такого блока