D3lphi

Проверяем js'ом юзер агент. Ищем в нем ключевые слова (iPhone, iPad). Затем, так же, с помощью js, добавляем соответствующие стили.

var ua = navigator.userAgent;
if (ua.search(/iPhone/)) {
    document.querySelector('style').textContent += "@media (max-width: 670px{.menu {height: 4px;}}"; // Как вариант, дополнить содержимое тэга style.
}

На мой взгляд, как вы выразились, этичнее, будет "перенести контент туда, куда просит css-шаблон". Благо, все современные фреймворки "требуют" одну и ту же структуру папок. Согласитесь, неудобно каждый раз лазить по файлам и заменять там пути к ресурсам.

Код в этих файлах идет сплошными строками без пробелов/переносов

Это называется "минимизация кода". Исходный код "скармливается" алгоритму, который убирает все пробелы, табуляции, переносы строк, комментарии и тд. Производится эта процедура для того, чтобы уменьшить размер файлов. Минимизированные файлы весят на порядок меньше не минимизированных, что способствует уменьшению времени загрузки сайта. Кстати, очень рекомендую воспользоваться сборщиком проектов GulpJS. После установки необходимых зависимостей и настройки gulp-файла он все минимизирует и соберет в один компактный js или css файл. Таким образом, все стили будут лежать только в 1 небольшом файле, а весь js код - в другом (Вместо десятка разных фалов с bootstrap - стилями, вашими родными стилями и тд). Такой подход уменьшает количество запросов к серверу и положительно сказывается на производительности.

$('#input-id').on('change', function () {
      var value = $(this).val();
      $('#div-id').html(value);
});

Вы, кажется, не знаете, что такое "аякс".

Если же вам все-таки, нужно обработать данные на сервере, то вот:

$('#input-id').on('change', function () {
      var value = $(this).val();
      $.ajax({
            url: '/url',
            method: 'POST',
            data: ({
                  value: value
            }),
            dataType: 'json',
            success: function (response) {
                  var result = response['value'];
                    // Манипуляции с данными....
                  $('#div-id').html(result);
            }
}

$value = $_POST['value'];
// ... манипуляции с полученным значением

echo json_encode([
    'value' => $value
]);

С помощью css невозможно удалить какой-либо элемент со страницы. Но можно его скрыть, по средствам использования свойства display и его значения none.

div {
display: none;
}

или же, прям в html:

<div style="display: none;">Текст какой-то</div>

Нет, смысла нет. Скорость работы уменьшится, а каких-либо плюсов от использования cms вы не получите. Раз количество страниц можно по пальцам пересчитать, значит редактировать вы их будете редко. Думаю, вам не составит труда зайти и поменять html-разметку.

нижний правый угол, жмёшь на github, там инструкция.

Установи высоту линии и высоту кнопки одинаковыми. Например:

line-height: 40px;
height: 40px;