Сетка Susy / Compass для мобильных устройств не работает на мобильных устройствах

Недавно я сделал быстрый сайт-портфолио, который все еще дорабатываю, но я использовал сетку Susy, которая, когда я уменьшаю ее размер с помощью браузера, по-прежнему выглядит так, как я ожидал. По сути, у меня есть три точки останова: одна для браузеров, одна для планшетов и одна для телефонов.

Единственная проблема в том, что когда я загружаю его на свой телефон (HTC Desire), зум кажется слишком далеким, и он меняет размер так, как будто это средняя точка останова (планшет).

Я установил следующие перерывы:

$break-medium: 30em $total-columns;
$break-large: 60em $total-columns;

Веб-сайт находится здесь

Я также заметил, что когда вы увеличиваете масштаб сайта, вам нужно прокручивать его по горизонтали, чего я стараюсь избегать! На самом деле сайт Susy тоже этого не делает.


compass-sass susy-compass
person Carrie Hall    schedule 15.01.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

На самом деле это не имеет ничего общего с Susy или правильными точками останова. По умолчанию мобильное сафари действует так, как будто у него ширина области просмотра 980 пикселей, поэтому оно может обрабатывать сайты, не оптимизированные для мобильных устройств. Если вы создали сайт, адаптированный для мобильных устройств, сообщите об этом Safari. См., Например, автоматическое масштабирование в iphone safari. Вероятно, вам нужно что-то вроде этого:

<meta name="viewport" content="width=device-width, initial-scale=1">
person Miriam Suzanne    schedule 15.01.2013
comment
Согласен, на вашем месте я бы посмотрел на bootstrap и / или шаблон, чтобы выяснить, какой еще магии вам, возможно, не хватает на ‹html› ‹header› вашей страницы. Это то, что я делаю каждый раз, когда мне приходится начинать с нуля - я иду посмотреть, что делают большие мальчики;) - person Jeremy Iglehart; 16.01.2013
comment
Ага! Ошибка новичка, я только что сколотил сайт и собирался попытаться оптимизировать его, как только заработаю. Теперь все работает нормально. Спасибо - person Carrie Hall; 16.01.2013

arrow_upward
0
arrow_downward

Кэрри,

Я не знаю разрешения вашего HTC Desire, но вот один инструмент, который я использую для проверки правильности разбивки «точек останова» для адаптивного дизайна:

http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/ https://github.com/josscrowcroft/Window-Size-Bookmarklet

Это букмарклет, указывающий размер области просмотра. На Mac с Google Chrome, однако, я считаю, что это число «выключено» примерно на такое же количество пикселей, как широкая полоса прокрутки или что-то в этом роде. Так что это не идеально, но помогает устранить проблему.

Я бы посмотрел, соответствуют ли ваши em вашей ожидаемой ширине пикселя для разбивки, и посмотрю, соответствует ли это вашему HTC - также EM могут быть испорчены на этом пути (настройки браузера, ваш html-объект не имеет правильных настроек и т. Д. ). Вы всегда можете попробовать проверить это, установив для него фиксированную ширину в пикселях, а затем снова проделать все свои математические вычисления для em (s).

Я не уверен, что это поможет, но, по крайней мере, у вас теперь есть еще один вариант инструмента на вашем поясе (если вы еще не знали об этом;)

Удачи и приветствия, Джереми

person Jeremy Iglehart    schedule 15.01.2013
comment
Спасибо, я раньше не видел этого инструмента, но он великолепен! Я сейчас посмотрю на них, спасибо за помощь :-) - person Carrie Hall; 15.01.2013
comment
Нет проблем, Кэрри, если вы найдете другие подобные инструменты, пожалуйста, пришлите их мне! plus.google.com/111783589266137495728 - person Jeremy Iglehart; 16.01.2013