#javascript #css #wordpress #responsive-design
#javascript #css #wordpress #адаптивный дизайн
Вопрос:
Я использую слегка измененную версию темы 2014. Раньше она отлично работала на настольных компьютерах и мобильных телефонах — дизайн был адаптивным правильным образом.
Однако на прошлой неделе веб-сайт внезапно начал некорректно изменять размер на мобильных телефонах. Вместо того, чтобы использовать почти всю ширину для основного контента, она сохраняет разрыв примерно в 20-30% и показывает фоновое изображение.
[Я здесь новичок, поэтому это не позволяет мне вставить изображение]
URL сайта является http://pink.accuracast.com
По-настоящему странно то, что, похоже, это изменение загружается после загрузки CSS, что заставляет меня думать, что причиной такого изменения может быть что-то в JavaScript, но я ни за что на свете не могу понять, что может быть причиной этого.
Я не могу с этим справиться, как обычно, потому что ошибка не повторяется в браузере настольного компьютера, когда я изменяю его размер до размера экрана мобильного устройства (хотя другие адаптивные функции действительно срабатывают).
Не мог бы кто-нибудь, пожалуйста, заглянуть на сайт и подсказать, в чем может быть проблема?
Ответ №1:
Вы пробовали использовать мобильный эмулятор?
Тестирование таким образом может позволить вам использовать ваши обычные методы устранения неполадок, чтобы найти проблему.
Я не вижу проблемы, на которую вы ссылаетесь, на этом iphone 5:http://mobiletest.me/iphone_5_emulator/#u=http://pink.accuracast.com
С каким мобильным телефоном у вас проблема?
Комментарии:
1. Я видел проблему на моем Nexus 5 (Chrome), а также на iPhone 5 и 5s (Safari и Chrome) Эмулятор показывает результаты так же, как и мой браузер на рабочем столе при изменении размера. Однако что-то меняется, когда вы видите это на реальном телефоне
Ответ №2:
ХОРОШО — я сам нашел ответ.
Я установил стиль для Facebook Like amp; Share box следующим образом:
.fb_iframe_widget span {
width: 90% !important;
}
В результате это приводило к увеличению ширины окна и изменению размера области содержимого. Теперь я изменил это в соответствии со спецификацией стиля @media, и это решило проблему.
Ответ №3:
Мне кажется, что если вы добавите
body {
overflow:hidden;
}
для вашего пользовательского CSS это исправит проблему.
Надеюсь, это поможет!