Содержание сайта обрезается и проблемы с макетом

Question

Содержание сайта обрезается и проблемы с макетом

0

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

Я работаю над живым сайтом - Beautiful & Abundant - и все работает как на рабочем столе, так и на планшете, однако, когда я его подниму на своем мобильном телефоне (Samsung Galaxy S3), он становится все вялым.

Скриншоты показывают посадку, если смотреть на моем телефоне. Просто отлично (хотя и немного дерьмовый макет устранения неполадок). На втором изображении показана увеличенная боковая панель и первая область блеска. Боковая панель имеет ширину 235 пикселей, а мой телефон имеет разрешение экрана 360 пикселей. Выполняя некоторую простую математику, боковая панель должна занимать 65,27 (повторяя, конечно) процентов моего экрана. К сожалению (как видно на изображении), он занимает около трети экрана, не говоря уже о том, что текст намного меньше, чем я его установил.

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

Сайт построен на WordPress, однако я не думаю, что это проблема WP, и именно поэтому я размещаю здесь вместо ответов WordPress. Если я отправлю туда, пожалуйста, дайте мне знать, и я буду более чем счастлив переместить его.

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

Спасибо заранее всем, кто предлагает помощь. Я пойду посмотреть, смогу ли я помочь кому-либо еще, пока я с нетерпением жду обратной связи!

РЕДАКТИРОВАТЬ

Благодаря @theftprevention, боковая панель и т.д. Ведут себя правильно, но я все еще сталкиваюсь с проблемой отсечения контента на моем телефоне. Я посмотрю, имеет ли кто-то еще вокруг меня ту же проблему.

ThatDudeLarry 23 сен. 2013, в 18:17

Источник

Теги:

jquery

css

user-interface

1 ответ

Ещё вопросы

theftprevention · Answer 1 · 2013-09-23T15-29-00.000Z

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

Если у вас есть доступ к необработанному 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 при повторном их сохранении.

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

Спасибо за это! Оптимизация мобильных телефонов и планшетов теперь работает, как и ожидалось, однако у меня все еще есть эта неприятная отсечка. Кстати, изображения будут значительно уменьшены в размерах, просто работая над тем, чтобы сначала решить более сложные задачи. (Спасибо за внимание, хотя!)