Сначала я скажу, что я некоторое время скрывался на всех сайтах StackExchange, и теперь я столкнулся с первой проблемой, с которой мне трудно справляться.
Я работаю над живым сайтом - Beautiful & Abundant - и все работает как на рабочем столе, так и на планшете, однако, когда я его подниму на своем мобильном телефоне (Samsung Galaxy S3), он становится все вялым.
Скриншоты показывают посадку, если смотреть на моем телефоне. Просто отлично (хотя и немного дерьмовый макет устранения неполадок). На втором изображении показана увеличенная боковая панель и первая область блеска. Боковая панель имеет ширину 235 пикселей, а мой телефон имеет разрешение экрана 360 пикселей. Выполняя некоторую простую математику, боковая панель должна занимать 65,27 (повторяя, конечно) процентов моего экрана. К сожалению (как видно на изображении), он занимает около трети экрана, не говоря уже о том, что текст намного меньше, чем я его установил.
Вторая область, вызывающая озабоченность (и самое главное), - это контент, который отключается на мобильных устройствах. Как видно на третьем скриншоте, все это просто резко заканчивается. Я не понимаю. Раньше у меня никогда не было этой проблемы.
Сайт построен на WordPress, однако я не думаю, что это проблема WP, и именно поэтому я размещаю здесь вместо ответов WordPress. Если я отправлю туда, пожалуйста, дайте мне знать, и я буду более чем счастлив переместить его.
Обычно я просто работаю над чем-то снова и снова, пока не волнуюсь на решение, но я надеюсь узнать больше об этой совместной работе, о которой я все слышал.
Спасибо заранее всем, кто предлагает помощь. Я пойду посмотреть, смогу ли я помочь кому-либо еще, пока я с нетерпением жду обратной связи!
РЕДАКТИРОВАТЬ
Благодаря @theftprevention, боковая панель и т.д. Ведут себя правильно, но я все еще сталкиваюсь с проблемой отсечения контента на моем телефоне. Я посмотрю, имеет ли кто-то еще вокруг меня ту же проблему.
Отзывчивость сайта отлично работает, когда я изменяю размер окна в своем браузере, но вы правы в отношении мобильного сайта, который выглядит странно, и я думаю, что знаю почему.
Если у вас есть доступ к необработанному HTML-странице, рассмотрите следующие строки (строки 7 и 8 в источнике вашей домашней страницы):
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
Замените обе эти строки следующим образом:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
Это должно решить, как браузеры для мобильных и планшетов обрабатывают масштабирование вашего контента. Я не мог воспроизвести проблему отсечки на третьем скриншоте на своем телефоне, но эти метатеги могут очень хорошо исправить это.
Наконец, у вас нет ни одного, а двух очень больших несжатых изображений; они составляют 1,6 МБ и 3,4 МБ, соответственно. Вы можете использовать GIMP или что-то, чтобы уменьшить их и использовать надлежащее сжатие JPEG при повторном их сохранении.
Надеюсь это поможет!