Как нанести метки на картинку?
если хочешь, чтобы оно работало адаптивно и пропорционально масштабировались твои маркеры с изображением - то только через svg. 
p.s. картинку в svg загнать тоже можно
1) делаем блок с фиксированным соотношением сторон (ratio), равным соотношению сторон картинки
2) картинку внутрь, на 100% по ширине и высоте
3) блоку relative
4) метки делаем например как блоки с фоном. тоже с фикс соотношением сторон. Ширину прописываем как % от общего блока
5) каждой дополнительно даем свое имя или модификатор. Расставляем как abs блоки, позиционируя через %
6) соотв-но вешаем js который по клику выводим справа нужный текст (сравнивая с именем/модом/дата-атрибутом данного флажка)

если все это неясно то проще заказать разработку
размер устройства в дюймах тут вообще не важен