Сергей Колпак

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

document.addEventListener('DOMContentLoaded', function(){
  setTimeout(() => {
    const howtoSlider = new Swiper('.howto', {
    loop: true,
    navigation: {
      nextEl: '.slider-button-next',
      prevEl: '.slider-button-prev',
    },
  })
  }, 1000);
})

Странно еще, что эффект проявлялся только при picture в слайдах, при img все было нормально.

VanillaJs

function onClickClose(elem) { // вызвать в момент показа окна, где elem - окно
    function outsideClickListener(event) {
        if (!elem.contains(event.target) && isVisible(elem)) {  // проверяем, что клик не по элементу и элемент виден
             elem.style.display = 'none'; //скрыть
             document.removeEventListener('click', outsideClickListener);
        }
    }
    document.addEventListener('click', outsideClickListener)
}
function isVisible(elem) { //открыто ли условное окно
   return !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
}

* {
  -webkit-tap-highlight-color: transparent;
}

Можете вместо * использовать более точечный селектор.

У кого проблемы с плагином WEBPCSS нужно установить converter командой -
npm install webp-converter@2.2.3 --save-dev
Мне помогло

1. Фоновые картинки не перетаскиваются.
2. Если поверх изображения в его полный размер кинуть пустой див с позиционированием z-index-а выше, то тоже нельзя будет захапать (как в инсте).

body{
  -webkit-text-size-adjust: none;
}

Короткий ответ:
не рисуйте в Фотошопе — рисуйте в Adobe XD. И все вопросы про dpi отпадут сами по себе.

Более развёрнутый ответ:
как правильно заметил GreatRash, dpi не имеет значения. Главное — кол-во пикселей. Да и то, с такими динамичными интерфейсами и адаптивными сайтами которые востребованы сегодня даже пиксели "сдают позиции" и делят место с %.

Если отвечать на вопрос, то верстать нужно в том разрешении (в пикселях), которое показывает браузер. Например, если с обычными компьютерами все ясно: ширина экрана 1280px, значит и рисовать нужно в 1280. То с телефонами уже все не так очевидно. Например, физический размер экрана iPhone 6: 750x1334px. Но браузер на телефоне показывает сайт так как будто бы там вдвое меньше пикселей: 375x667px. То есть, если вы в макете нарисуете блок шириной 187px, то он займёт половину экрана на iPhone 6.
Есть отличный сайт, который показывает размеры экранов самых популярных мобильных устройств:

• их фактические размеры (первые две колонки)
  
• и размеры, которые "понимает" браузер (3 и 4 колонки — это то, что вам надо).
  

Почему Adobe XD? Потому что, зуб даю, через пару лет Adobe скажет:
— Ребята, мы убираем из Фотошопа все фишки, которые раньше помогали вам делать дизайн сайтов. Верстайте их теперь в XD. А мы оставим фотошоп для фотографов и иллюстраторов.

Дело в том, что Adobe XD — это их новая разработка для прототипирования (дизайна) сайтов. И разработка этой программы идёт полным ходом. Пока-что доступна только под Мак (к концу года будет Windows версия). В программе есть очень "вкусные" фишки, которые ускоряют работу в десятки раз. Посмотрите хотя бы эту GIF-ку ниже. А ещё сама программа очень быстро работает.



Есть еще Sketch. Он тоже создан специально для дизайна сайтов и только под Мак.
Сначала может быть трудновато привыкнуть к дизайну без Фотошопа, но оно того стоит, поверьте.

Философия:
Что такое дизайн сайта? И зачем думать про разрешение? И зачем вообще мы их рисуем?
После того как сайт сделан и проект закрыт, все PSD макеты дизайнера отправляются в архив и лежат там мертвым грузом десятки лет пока вы их не удалите. Рисунки никому не нужны — нужен сам сайт. А рисуем мы их для того, чтобы легче представить себе и показать верстальщику как сайт должен смотреться. То есть, если бы мы могли телепатически обьяснить верстальщику что и как должно выглядеть, то никто бы не занимался этой "ерундой" в Фотошопе. И это основная задача дизайнера: придумать как сайт должен выглядеть, анимироваться и взаимодействовать с юзером и передать это дальше в производство.

И тут ваша идеальная работа, как дизайнера, должна выглядеть так:

1. Вы рисуете страницу так как она должна выглядеть и выносите в отдельный документ (или слой) все размеры всех блоков, отступов, хедеров, футеров и пр. У вас должно получиться что-то вроде "чертежа" сайта с вашими комментариями;
   
2. Затем, в отдельное место выносите дизайны всех кнопок, полей для ввода текста, стили заголовков, аккордеонов, вкладок и всего остального что есть на вашем сайте;
   
3. Отдельно подготавливаете контент: текст и картинки. При этом желательно, чтобы картинки были сразу продублированы в нескольких размерах (в случае с адаптивными сайтами).
   
4. Все иконки — тоже отдельно. Векторные, в формате SVG, плюс PNG — для подстраховки при вёрстке.
   

Затем собираете это все в один портфель и несёте верстальщику. Он скажет вам большое спасибо и назовёт лучшим дизайнером в мире.

Для примера, касательно пункта 1, посмотрите как я обычно оформляю ТЗ для верстальщика. Это только две страницы из 20-ти.



А эта работа, которую вы проделали — это не "дополнительный" труд. Это то как обычно выглядит хороший дизайн-процесс. Особенно, в больших студиях. Таким образом вы избавитесь от кучи мелких ошибок со стороны разработчиков и от необходимости разжёвывать все мелочи отвечая на их "глупые" вопросы.

Компиляторы-транспиляторы-трансляторы (типа Coffee, LESS, Jade), тест-раннеры, стайл-чекеры и линтеры (mocha, chai, karma, (js|es)lint, jscs), плагины для таск-раннеров (grunt-contrib-watch, gulp-jade) — все это обычно ставится как --save-dev, потому что нужно только тем, кто контрибьютит в этот проект, работает с его кодом.

Библиотеки и фреймворки (expressjs, jquery, backbone), на основе которых работает ваш код, без которых ваш код не запустится у его потребителя — ставятся как --save.

Ctrl+C попробуйте