Михаил Кузнецов

Суперлузер? Серьезно?
Ок, размер рабочей области зависит от предпочтений и фолбеков.
Например, мое разрешение монитора сейчас как раз 1920, то есть картинка шириной 1920 будет как раз 100% ширины экрана... не учитывая полосу прокрутки и рамки окна. То есть нужны поля. Допустим по 15 пикселей(у меня не ретина, так что мой монитор имеет 72 точки на дюйм). Итого 1920 превращается в 1890, если надо контент делать на всю ширину (section-fluid в бутстраповых классах).
1920 это сейчас считаем как дефолтный монитор(смотрим по статистике), а на момент создания бутстрапа они зафиксировали 1170 как минимально допстимое разрешение десктопа, потому контент вписывают на такой размер(учитывая поля по 15 пикселей это разрещение 1200*800) как наиболее используемым разрешением.
Дальше 1280 это популярная ширина в разных разрешениях, как брекпойнт. Но уже без полей.
960 это из за одноименного фреймворка, где это число используется для фолбека на 1024*968 разрешение плюс поля, округление до нормального делительного числа.
Число 960(как и остальные перечисленные Вами) выбрано потому что удобно делить на колонки с полями. На 2/4/6/8/10/12/16/24

Берите ширину в зависимости о того, как будете верстать. А, ну и погодите, если Вы получаете готовый дизайн, то Вам не сильно получится "брать" какую то ширину контента, а придется работать с тем, что дали.
Опять же, будете ли пользовать фреймворки - тоже ограничит/упростит выбор ширины.
Забивать не надо. Если забили на ширину контента, то либо просто накалякали какую-то свою ширину, но все равно единую, либо вообще разброс по секциям/блокам. Вы вполне сможете потом свести всё до единой ширины, которую сами выбрали, если заказчик согласен и не требуется пиксель перфект по контентной области(обычно нет, и вполне обьясняется заказчику требованиями "соответствия для старых мониторов" или что то такое, после чего они соглашаются)

Зависит в основном от этого:

Вопрос решил так: оказывается есть еще такие варианты отображения, как
'contain' - это дефолтный по размеру контейнера;
'cover' - растягивается на весь экран;
'scaledown' - по размеру изображения и при сжатии экрана сжимается;
'none' - по размеру изображения, но при сжатии экрана не сжимается.
Добавил атрибут и значение data-fit="scaledown" и всё зарабтало как надо.

1. Растеризовать SVG в обычную картинку. Вынести все данные в отдельный объект с картой. Слушать mouseover обычным VanillaJS.

2. Оптимизировать SVG.
Из этого

<circle class="tc-map-seat tc-map-seat_cat0" cx="201038" cy="16629" r="695" tc-seat-no="3"></circle>

Вот в это

<circle class="c0" cx="201038" cy="16629" r="695" n="3"></circle>

Забыть нахрен про jQuery, зумить через CSS, двигать через VanillaJS requestAnimationFrame.
С сервера загружать с gzip.

3. Посмотрите, как это сделано на ticketmaster.com. Там карта разбита на зоны. Можно сделать точно также, но по клику по зоне показывать карту зоны. Т.е. сделать 2 уровня зума. Просто и функционально, плюс можно подсвечивать занятые места.

PHP version 7.0 и выше
PDO PHP Extension
cURL PHP Extension
OpenSSL PHP Extension
Mbstring PHP Library
ZipArchive PHP Library
GD PHP Library

https://octobercms.com/docs/setup/installation#sys...

Нашла такое решение

// Loading document.
PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
  // Document loaded, retrieving the page.
  return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
    // Creating the page view with default parameters.
    var pdfPageView = new PDFJS.PDFPageView({
      container: container,
      id: PAGE_TO_VIEW,
      scale: SCALE,
      defaultViewport: pdfPage.getViewport(SCALE),
      // We can enable text/annotations layers, if needed
      textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
      annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
    });
    // Associates the actual page with the view, and drawing it
    pdfPageView.setPdfPage(pdfPage);
    return pdfPageView.draw();
  });
});

Тут и текст и ссылки добавляются, еще нужно подключить сss чтоб annotation встали на место.
import 'pdfjs-dist/web/pdf_viewer.css';
Можно сделать и через метод который вы нашли :

import { AnnotationLayerBuilder } from 'pdfjs-dist/lib/web/annotation_layer_builder';
import { SimpleLinkService} from 'pdfjs-dist/lib/web/pdf_link_service';
import NullL10n from 'pdfjs-dist/lib/web/ui_utils.js';

var annotateMeta = page.getAnnotations().then(function (data) {

        var annotation = new AnnotationLayerBuilder({
          pageDiv: textcontainer,
          linkService: new SimpleLinkService(),
          pdfPage: page,
          l10n: NullL10n
        })
        annotation .render(viewport);
      });

Но первый вариант мне больше нравится

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

Вообще это Mockup, для поиска просто гуглить Mockup MacBook; Mockup iPhone и так далее.

Могу описать тезисами.
1. Механика на сайте ДоДо понятна
2. Но их архитектура далека от идеала и элегантности. По сути это вынужденные костыли тк их платформа это самописька.
3. В Woo на мой взгляд есть более элегантное понятие Endpoint
4. Добавляем Endpoint "city" и получаем ссылку типа /product/pizza1/city/moscow/
5. При добавлении в корзину есть хук который позволяет подменить цену и любые другие данные о продукте

Где хранить цены? Вопрос вкуса и архитектуры. Например можно сделать тип поста Города и хранить данные о ценах в разрезе продукта в комментах. Можно отдельную таблицу написать. Можно в метаполях хранить. В общем то если самое простое решение и городов не много то метаполя будут норм.

Ну и далее имея данные пишем функцию получения цены по продукту и городу.

Далее через хук меняем цену.

Все.

Думаю за пару недель средний программист такое сможет написать.

Когда то собрал эти ссылки может помогут
PSD HTML CMS Шаблоны www.enfusionthemes.com www.mafiashare.net
HTML PSD PHOTOSHOP followdesign.com
Zoom эффект\галерея www.starplugins.com
Шаблоны chocotemplates.com css-free-templates.com
Флешь шаблоны www.flashmo.com
Шаблоны бесплатно www.websitetemplatesonline.com
Templatemonster blog.templatemonster.com/free-website-templates
PSD шаблоны all-psd.ru
Полезные разработки efimov.ws followdesign.com
Фото для фона patterns.ava7.com
Различные меню\всп окно\ и т.д. webscript.my1.ru