Если содержимое страницы шире указанной области просмотра и пользователь вынужден выполнять горизонтальную прокрутку, то в отчете PageSpeed Insights вы увидите пункт - "Адаптируйте размер контента для области просмотра".
Пользователи ПК и мобильных устройств привыкли выполнять вертикальную, а не горизонтальную прокрутку веб-сайтов. Если для просмотра всего содержания необходимо прокрутить сайт по горизонтали или уменьшить масштаб, это вызывает неудобства.
При разработке сайта для мобильных устройств с мета-тегом viewport вы можете случайно расположить содержание так, что оно не поместится в указанную область просмотра. Например, если изображение шире области просмотра, может возникнуть необходимость в горизонтальной прокрутке. Во избежание этого нужно изменить контент так, чтобы он помещался целиком.
Так как размер экрана различается на разных устройствах (например, на телефонах/планшетных ПК и даже на разных телефонах), необходимо настроить область просмотра таким образом, чтобы на всех экранах страницы отображались корректно. Однако ширина области просмотра (в пикселях CSS) может варьироваться, поэтому не следует подгонять содержание страницы под определенный размер области просмотра.
Не устанавливайте в CSS большую абсолютную ширину для элементов страницы (например, div{width:360px;}), так как они могут оказаться слишком широкими для области просмотра на узких экранах (например, если ширина экрана составляет 320 пикселей). Вместо этого используйте относительные значения, например width:100%. По тем же соображениям избегайте больших абсолютных значений при указании расположения элементов, так как те могут оказаться за пределами области просмотра на маленьких экранах.
При необходимости можно использовать media запросы CSS для применения разных стилей на больших и маленьких экранах:
Пользователи ПК и мобильных устройств привыкли выполнять вертикальную, а не горизонтальную прокрутку веб-сайтов. Если для просмотра всего содержания необходимо прокрутить сайт по горизонтали или уменьшить масштаб, это вызывает неудобства.
При разработке сайта для мобильных устройств с мета-тегом viewport вы можете случайно расположить содержание так, что оно не поместится в указанную область просмотра. Например, если изображение шире области просмотра, может возникнуть необходимость в горизонтальной прокрутке. Во избежание этого нужно изменить контент так, чтобы он помещался целиком.
Не устанавливайте в CSS большую абсолютную ширину для элементов страницы (например, div{width:360px;}), так как они могут оказаться слишком широкими для области просмотра на узких экранах (например, если ширина экрана составляет 320 пикселей). Вместо этого используйте относительные значения, например width:100%. По тем же соображениям избегайте больших абсолютных значений при указании расположения элементов, так как те могут оказаться за пределами области просмотра на маленьких экранах.
При необходимости можно использовать media запросы CSS для применения разных стилей на больших и маленьких экранах:
<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />Размер изображений тоже должен адаптироваться под размер экрана. Один из путей реализации адаптивных изображений, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки. Как более простой вариант можно использовать процентные значения для свойства width (ширина) и значение auto для свойства height (высота). В bootstrap для этого можно использовать специальный класс - img-responsive.
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" />
Комментарии
Отправить комментарий