CODING, Mobile Vew, Font Awesome

Вёрстка HomeWork *

loom.psd

Mobile Vew Port

SlickNav

Font Awesome

jQueri USER INTERFACE

Gulp js

Isotope js

Для мобильных сайтов обязательно!

Задав мета-тегу viewport значение “device-width”, мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по-умолчанию. На большом количестве смартфонов ширина экрана равняется 320px (в портретном режиме). Можно задать самостоятельно ширину в 320px, что даст тот же результат, но на некоторых смартфонах ширина экрана может быть другой, поэтому самый оптимальный вариант — использовать device-width.

Одним из самых распространенных вариантов определения области просмотра является следующий вариант:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

который определяет ширину страницы и задает начальный масштаб.

Также, часто можно встретить такой вариант:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

В таком случае странице задается ширина устройства, на котором она открыта, а также запрещается любое масштабирование — как начальное при загрузке, так и пользовательское — уже после загрузки. В таком режиме мобильная веб-страница функционирует как мобильное приложение, где пользователю доступен только вертикальный или горизонтальный скролл. Однако такую запись лучше не использовать слепо, ибо нельзя запрещать пользователю уменьшать и увеличивать масштаб по своему желанию, если того не требует дизайнерская задумка. К примеру, слишком малый шрифт ухудшает читабельность текста и в таком случае необходимо использовать приближение.

Мета-тег viewport — относительно новый, поэтому на данный момент поддерживается не всеми браузерами, особенно это касается старых моделей смартфонов. В таких случаях есть смысл использовать некоторые старые методы, которые позволяют браузеру идентифицировать страничку, как оптимизированную под мобильный веб. Это можно сделать, с помощью следующий мета-тегов:

<meta name="MobileOptimized" content="320"/>
<meta name="HandheldFriendly" content="true"/>

Подробнее об этих и других специфических мобильных тегах можно почитать здесь.

Join the discussion

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
=) Home Work
CSS
JavaScript
Word Press

Интеркасса (API)

Доллар

покупка  $ 1 | 27.32 грн
продажа $ 1 | 24.41 грн

Евро

покупка  € 1 | 29.75 грн
продажа € 1 | 26.63 грн