Проблемы с дизайном в Safari

Question

Я уже давно работаю над веб-сайтом, выполняя большую часть своих тестов в Chrome, Firefox и IE. Когда я обертываю вещи, я пробовал просматривать их в Safari (на Mac, iPad и iPhone). Я заметил, что некоторые элементы неуместны в Safari. Я пробовал играть с CSS, но мне не повезло.

Страницы можно посмотреть здесь - http://staging.princewebdesigns.com/gallais/

См специально логотип (толкание вниз в баннер), шрифт слоганы в баннере (упаковка за баннер и простирающимся слишком далеко влево) , обертка заголовка «Featured Work», обертывание имен проектов и обрезка нижнего колонтитула.

Вот как страница должна выглядеть - http://staging.princewebdesigns.com/gallais/images/chrome.png

Чтобы увидеть, как это выглядит на моем iPhone, изменить ссылку выше .../iphone.png

Любая помощь приветствуется.

Answer 1

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

Я загрузил страницу в Safari 5.1 на Mac OS 10.7.3, и он загружается нормально изначально. Когда я увеличил масштаб изображения, макет остался неповрежденным. Как только я попытался масштабировать только текст, макет разбился на ваше описание.

Как говорится, вы можете подумать о том, как сделать макет более «гибким» в случае увеличения размера текста. Например, в IE по умолчанию масштабирование - это полное масштабирование страницы, но пользователь все равно может увеличить свой размер текста, кроме масштабирования. В этих ситуациях стоит проверить ваш макет, чтобы убедиться, что он полностью не сходит с рельсов. Я не говорю, что это должно быть отлично, но все еще разборчиво.

Одна идея состоит в том, чтобы опробовать различные устройства. Я обнаружил, что при объявлении горизонтальных длин (например, margin-left) с использованием относительных измерений, но при объявлении вертикальные длины (например, margin-top) с использованием измерений пикселей лучше. Для суперкритических предметов, таких как логотип сайта, positon: absolute может быть хорошим способом попробовать.