Решил я тут попробовать медиа-запросы в действии на одном из сайтов на Drupal 7. Добавил viewport, расписал css по нужным мне разрешениям и вроде все хорошо, но при тесте на айфоне появилась Она — пустая белая полоса справа. При этом, в момент открытия сайта ее не было видно, проявлялась она только при уменьшении или при таче вправо. Откуда она взялась — непонятно, что делать — тоже.
Полез в гугл, нашел аналоги на форумах 2011-12 годов, в основном. Говорили там про некий баг Safari. Эту версию я отбросил, так как прошло и не мало времени и баг уже давно бы исправили. После этого нашел еще несколько топиков, комментаторы которых, о причинах появления полосы ничего сказать не смогли, но предложили решение — прописать для html, body параметр overflow: hidden, что ограничило бы видимую область и избавило бы от полосы. Но это решение скорее костыль и лечение последствий, а не причин. Тем более, что при таком варианте, нечто странное происходило с поведением скролла. Больше русскоязычный интернет ничем помочь не смог.
Странно, но на английском упоминаний о данной проблеме было на порядок больше. Англоговорящие ребята поделились на два лагеря, одни, также как и наши предлагали пресловутый оверфлоу, а вторые говорили, что ненавистная полоса в Safari появляется, когда у какого-либо элемента на странице ширина больше разрешения устройства (во вьюпорте прописано соотношение content="width=device-width, initial-scale=1.0"). Это может быть какая-то картинка или, например, заголовок (отдельные слова переносятся на следующую строку, но вот если у вас есть длинное слово, что-то вроде «Эйяфьятлайокудль», то оно может не влезть).
В моем случае, второй вариант помог, у меня обнаружилась не резиновая картинка с большей фиксированной шириной, чем ширина айфона (320px). Выставил ширину картинке в процентах и полоса пропала! Честно говоря, поначалу, я скептически отнесся к такому объяснению, мол, я же не дурак, нету у меня элементов, превышающих ширину, я все предусмотрел, я же умный. Но оказалось вот так. Ну и шрифт пришлось уменьшить, ибо длинные слова в заголовках тоже не влезали в свою колонку.