Увеличение / уменьшение Safari портит макет страницы (плохо меняет размер шрифта) - PullRequest
Новая
       25

Увеличение / уменьшение Safari портит макет страницы (плохо меняет размер шрифта)

1 голос
/ 07 ноября 2011

Я хочу сделать свой веб-сайт кросс-браузерным, но есть одна проблема.

Функция увеличения / уменьшения в Safari разрушает макет моего веб-сайта - он плохо меняет размер шрифта (или, по крайней мере,как IE, Firefox и Chrome).

Как я могу это исправить?

Ответы [ 3 ]

5 голосов
/ 10 декабря 2011

Масштабирование сложное, потому что браузеры имеют три средства для этого:

  1. Только масштабирование текста (стандартные IE и Safari <= 3 way) </li>
  2. Интеллектуальное масштабирование всей страницы (опция Opera, FF 3+, Safari 4+, Chrome и IE 9)
  3. Визуализация страницы в «нормальном» размере и масштабирование всего объекта (способ iPhone, опционально в Safari5 на Lion)

Проблема в том, что браузеры не делают этого разумно:

  • IE <= 9 не будет масштабировать элементы, размер которых измеряется в пикселях, никогда.Если ваша страница использует все шрифты в px, она не масштабируется.Если вы затем зададите базовый шрифт как что-то вроде 10px, пользователям IE, которые не смогут его прочитать, не повезет, если у них не будет IE 9. </li>
  • Safari (и некоторые другие) будет, если установлен масштаб шрифтовтолько масштабирование шрифтов в px, но без настройки высоты строки или другого макета, указанного в px.Это усугубляется до крайности.
  • Safari 4+ не будет масштабировать шрифт, указанный в процентах от значения в пикселях.Это означает, что если ваш базовый шрифт имеет размер 10px и вы указываете селектор как имеющий font-size: 100%, каждый элемент и изображение будут увеличиваться, а текст тупо - нет.Это сломано, и я не могу заставить никого в Apple это признать.Chrome, вероятно, страдает тем же идиотизмом.

Решение

Я должен сказать, что первым шагом является серьезное оскорбление любого, кто использует базовый шрифт на всем сайте.10 пикселей, потому что с все более и более высоким показом DPI это просто жестокая вещь для ваших пользователей.Но это решение посетителей.Ваш автор должен быть немного другим:

  1. Если ваш сайт не имеет фиксированной ширины 740 пикселей или чего-то еще, установите базовый шрифт на 1em и оставьте его там.Если вы не можете отойти от модели дизайна 740px, не устанавливайте базовый шрифт меньше 12px.С экранами 100 точек на дюйм, 12px составляет 8.6pt.При разрешении 132 DPI (iPhone4 и других устройствах) он составляет 6,5 пикс.Доступна всем, кому за 40, даже близко, не говоря уже о таких людях со слабым зрением, как я.Следовательно, шрифт с разрешением 10px, столь любимый людьми, которые считают текст «акцентом» страницы, равен 5,5pt на экране с разрешением 132 DPI.
  2. Если в заголовке используется изображение, которое нельзя масштабировать, сделайтеубедитесь, что ваш заголовок выглядит хорошо, если все за исключением масштабирования.Укажите шрифты заголовка в пикселях, переопределяя 1em в базе.IE <= 9 никогда не масштабирует его, никогда.Safari <4, вероятно, испортит его.Ничего не поделаешь. </li>
  3. Убедитесь, что ваш CSS и макет допускают переполнение по вертикали или прокрутке.Переполнение прокрутки не работает на iOS, но все, что у нас есть, это все равно пинч-зум.Нетрудно сделать ваше содержимое body жидким.Fluid-width требует больше работы (но я тоже так делаю!)
  4. Никогда не измеряйте шрифты в процентах.Всегда используйте дроби их.1.2em составляет 120%.Аналогичным образом, 0,75em составляет 75%.Я никогда не использую базовый шрифт менее 0,75 мкм, и только для случайного текста.

Результат

IE может увеличить тело вашей страницы,но не заголовок.

Safari 4 увеличит масштаб всей страницы.Избегая процентного содержания основного шрифта в пикселях, вы избегаете ошибки Safari, которую я не могу заставить Apple признать, что шрифты НИКОГДА не масштабируются, даже если каждая другая часть страницы делает это.Вероятно, это проблема, с которой вы столкнулись.

Вероятно, iPhone будет продолжать зависеть от масштабирования, если вы не предоставите мобильную таблицу стилей.(Если вы это сделаете, пожалуйста, не устанавливайте max-zoom: 1.0, это раздражает!)

Вот и все в двух словах.

5 голосов
/ 28 ноября 2011

Проверьте, есть ли в вашем файле CSS стиль для -webkit-text-size-adjust

Если вы делаете, и это следующее

-webkit-text-size-adjust: none;

вам нужно будет обновить его до

-webkit-text-size-adjust: auto;

1 голос
/ 23 апреля 2013

Я использовал масштабирование страницы с помощью свойства css3 

           ( vendor prefix ) - transform = scale( 10 unit);  
           exp : document.body.style.webkitTransform = "scale(10px , 10px)";

В последних версиях браузеров, таких как chrome, ffx, пропорционально масштабируется содержимое страницы (изображения, текст, элементы DOM), но в тексте браузера safari нетпри правильном масштабировании это разочаровывает ожидание пользователя
делает текстовое содержимое размытым 

      I used to fix css3 zoom property instant of scale property
      it  makes the content zooming proportionally 

                   document.body.style.zoom = 1.1;
...