Блог

Я использую слегка измененную версию темы 2014. Раньше она отлично работала на настольных компьютерах и мобильных телефонах — дизайн был адаптивным правильным образом.

Однако на прошлой неделе веб-сайт внезапно начал некорректно изменять размер на мобильных телефонах. Вместо того, чтобы использовать почти всю ширину для основного контента, она сохраняет разрыв примерно в 20-30% и показывает фоновое изображение.

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

URL сайта является http://pink.accuracast.com

По-настоящему странно то, что, похоже, это изменение загружается после загрузки CSS, что заставляет меня думать, что причиной такого изменения может быть что-то в JavaScript, но я ни за что на свете не могу понять, что может быть причиной этого.

Я не могу с этим справиться, как обычно, потому что ошибка не повторяется в браузере настольного компьютера, когда я изменяю его размер до размера экрана мобильного устройства (хотя другие адаптивные функции действительно срабатывают).

Не мог бы кто-нибудь, пожалуйста, заглянуть на сайт и подсказать, в чем может быть проблема?

Вы пробовали использовать мобильный эмулятор?

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

Я не вижу проблемы, на которую вы ссылаетесь, на этом iphone 5:http://mobiletest.me/iphone_5_emulator/#u=http://pink.accuracast.com

С каким мобильным телефоном у вас проблема?

ХОРОШО — я сам нашел ответ.

Я установил стиль для Facebook Like amp; Share box следующим образом:

 .fb_iframe_widget span {
    width: 90% !important;
}
  

В результате это приводило к увеличению ширины окна и изменению размера области содержимого. Теперь я изменил это в соответствии со спецификацией стиля @media, и это решило проблему.

Мне кажется, что если вы добавите

 body {
overflow:hidden;
}
  

для вашего пользовательского CSS это исправит проблему.

Надеюсь, это поможет!