Alex

С какой проблемой вам нужна помощь?
Проблема с навигацией по странице?
Основы html. HTML зародился как документ. Вам тут даже JS скорее всего не нужен.

Используйте оглавление. С ссылками на секции/заголовки вашего докумета. Для удобства, стоит сверстать оглавление так, чтобы оно всегда было под рукой. Например position sticky, или что там позволяет вам ваш дизайн. Вот и всё.

Табы это не про то. С табами у вас будет куда больше возни а профита меньше.

Или проблема в том, что пользователь не читает всё до конца? Ну тут вам ничего не поможет. Пользователь всегда будет предпринимать минимум шагов для достижения своей цели (сколько раз вы читали лицензию прежде чем принять её?). Разместите самые важные части вверху. Выделите их. Возможно винесите на отдельную страницу. Всё что менее важно опустите ниже или спрячте за блоком "Дополнительно".

Так а в чем собственно дело? Если вы не видите препятствий -- то сделайте. Скорее всего вашему закасчику и пользователям глубоко пофиг, на способ реализации.

Почему на айфонах вёрстка слетает?

Потому, что скорее всего, Safari обрабатывает какие-то свойства не так как в других браузерах.

Как решить проблемы вёрстки/стилей?

Открыть Safari. Воспроизвести проблему. Найти и устранить.

Как по мне, нужно тестировать и так и так. Пользователи таких же ноутбуков ведь не будут отключать масштабирование, чтобы посмотреть ваш сайт.

Сложно ли будет потом делать адаптив?

Если вопрос стоит именно так -- да, будет. Потому что нужно сразу продумывать как интерфейс должен работать на любом экране. Нет такого понятия как "сделать верстку сейчас, а потом добавить адаптив". Вы сразу верстаете интерфейс который умеет изменяться в зависимости от каких-либо условий.
А если вы сначала делаете интерфейс "как получится", а уже после начинаете думать как бы его впихнуть в нестандартный размер экрана -- вы столкнетесь с множеством трудностей.

На сервере, определить что это мобильная версия и не отдавать скрипты для картинок.

Или

На клиенте, определить что это мобильная версия и не запускать скрипт для картинок

Как и написали вам в комментариях: адаптивный дизайн, подразумевает изменение способа отображения контента, чтобы он был удобно доступен на разных форм факторах. Но не подразумевает изменение самого контента.

И если вам попадётся такой заказ — убеждайте дизайнера что он не прав.

Тем не менее, ситуации бывают всякие, и ваш случай не совсем типичный. Я быреализовал следующим образом:

1. Обратится к серверу, загрузить информацию для сколько то карточек, скажем для 10.
   
2. Посмотреть на ширину экран.
   
3. Вывести 2 или 3 карточки в зивисимости от формфактора. Остальное оставить в памяти.
   
4. По клику на "загрузить еще" достаём ещё 2-3 карточки из памяти и отображаем.
   
5. Если карточки в памяти кончаются — сделать запрос на сервер и загрузить ещё 10.
   

Если изображение является частью контента — только тег <img alt="">. Если изображение выполняет исключительно декоративную роль тогда фон.

Сделать его вертикальным. Слева линия с бейджами, справа — фото.