В предыдущем исследовании фронтенда понимание метатегов было только в этом предложении.
<мета-кодировка=UTF-8>
Но когда вы открываете любой веб-сайт, в его заголовке есть столбец метатегов. Например, у нас есть сайт боевых искусств VeVb, но я с ним не знаком, поэтому добавил метатег в начало плана обучения.
<meta name=viewport content=width=device-width, начальный масштаб=1,0, максимальный масштаб=1,0, минимальный масштаб=1,0, масштабируемый пользователем=нет>
Это наиболее часто используемый вариант. Инструкции ширины и высоты определяют логическую ширину и высоту области просмотра соответственно. Их значением является либо число в пикселях, либо специальный символ маркера. Директива ширины использует тег ширины устройства, чтобы указать, что ширина области просмотра должна соответствовать ширине экрана устройства. Аналогично, директива высоты использует флаг высоты устройства, чтобы указать, что высота области просмотра равна высоте экрана устройства.
Директива user-scalable определяет, может ли пользователь масштабировать область просмотра, то есть вид веб-страницы. Значение «да» позволяет пользователю масштабировать, значение «нет» запрещает масштабирование.
Директива начального масштаба используется для установки начального масштабирования веб-страницы. Начальное значение масштабирования по умолчанию варьируется в зависимости от браузера смартфона. Обычно устройство отображает всю веб-страницу в браузере. Если установить значение 1.0, будет отображаться немасштабированный веб-документ.
Директивы максимального и минимального масштаба используются для установки ограничения пользователя на коэффициент масштабирования веб-страницы. Значения варьируются от 0,25 до 10,0. Как и в случае с Initial-scale, значением этих директив является масштабирование, применяемое к содержимому области просмотра.
Все браузеры смартфонов поддерживают директивы ширины и масштабирования пользователя тега ViewPort <meta>. Но Opera Mobile не использует директиву user-scalable, вместо этого утверждая, что пользователи всегда должны сохранять возможность масштабирования веб-страниц в мобильных браузерах.
Следующее действительно используется редко. устройствоPixelRatiowindow.devicePixelRatio — это соотношение физических пикселей к аппаратно-независимым пикселям (провалам) на устройстве. Выражение формулы: window.devicePixelRatio = физические пиксели/дипсы.
адаптивный экран веб-сайта под размер экранаЕсли значение содержимого меньше или равно ширине экрана, адаптивная подгонка экрана по размеру экрана веб-сайта будет отключена. Веб-сайт не будет масштабироваться при растяжении браузера.
Если значение содержимого превышает ширину экрана, будет включен параметр «По размеру экрана».
Связано с браузером Apple08.07.2015
<meta name=viewport content=minimal-ui>
В Safari на iOS 7.1 к метатегу добавляется атрибут минимального пользовательского интерфейса, чтобы верхнюю адресную строку и нижнюю панель навигации можно было скрыть при загрузке веб-страницы.
<meta name=apple-mobile-web-app-capable content=yes>
Для включения функции веб-приложения установлено значение «Да». Веб-сайт удалит панель инструментов Apple по умолчанию и строку меню в полноэкранном режиме.
<meta name=apple-touch-fullscreen content=yes>
Включить поддержку программ веб-приложений
<meta name=format-detection content=telephone=no><meta name=format-detection content=email=no />
iPhone автоматически добавит стиль ссылки к вашему тексту и щелкните номер, чтобы автоматически набрать его!
Telephone=no игнорирует номера на странице и идентифицирует их как номера телефонов.
Telephone=yes включает преобразование номеров в коммутируемые ссылки. Включено по умолчанию!
<meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=black /><meta name=apple- mobile-web-app-status-bar-style content=black-translucent />
Управление стилем отображения строки состояния по умолчанию (белый) черный (черный) черно-полупрозрачный (серый полупрозрачный)
тег ссылки apple-touch-iconЕсли для параметра apple-mobile-web-app-capable установлено значение «да», вы можете использовать кнопку «Добавить на главный экран», чтобы добавить веб-сайт на главный экран на iPhone, iPad и iTouch Safari.
Установив соответствующий тег apple-touch-icon, значок, добавленный на главный экран, будет использовать указанное нами изображение.
Далее следует подобрать оптимальную иконку для разных устройств ox. Размер по умолчанию для iPhone составляет 60 пикселей, для iPad — 76 пикселей, а экран Retina умножается в 2 раза.
<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon size=76×76″ href=touch-icon-ipad.png><link rel=apple- размеры сенсорных значков = 120×120 дюймов href=touch-icon-iphone-retina.png><link rel=apple-touch-icon размеры=152×152″ href=touch-icon-ipad-retina.png>
До версии ios7 система по умолчанию добавляла к значкам специальные эффекты (закругленные углы и блики). Если вы не хотите, чтобы система добавляла специальные эффекты, вы можете использовать apple-touch-icon-precompose.png вместо apple-touch-. значок.png.
Приоритет использования значков следующий:Если нет значка, соответствующего рекомендованному размеру для соответствующего устройства, первым будет использоваться значок, размер которого больше рекомендуемого, но ближе всего к рекомендуемому.
Если значков больше рекомендуемого размера нет, первым будет выбран значок, размер которого ближе всего к рекомендуемому.
Если имеется несколько значков, соответствующих рекомендуемому размеру, первым будет выбран значок, содержащий предварительно составленное ключевое слово.
Если вы не укажете значок, используя тег ссылки в этой области, он автоматически выполнит поиск значков PNG с префиксом apple-touch-icon в корневом каталоге веб-сайта.
Примечание. ios7 больше не добавляет специальные эффекты к значкам. До версии ios7 специальные эффекты добавлялись к значкам по умолчанию, если только значок не имел ключевого слова -precompose.png в качестве суффикса. Интернет Эксплорер <meta http-equiv=X-UA-Compatible content=IE=edge> Запретить IE использовать режим совместимости
<meta name=MobileOptimized content=320″> Тег ширины определения, установленный Microsoft для мобильной версии IE.
Браузер не будет автоматически регулировать размер файла, что означает, что он имеет фиксированный размер и не будет растягиваться или масштабироваться вместе с браузером.
<meta name=HandheldFriendly content=true /> : удобен ли он для портативных устройств, только true или false.
<meta name=screen-orientation content=portrait> Установить вертикальный экран
<meta name=full-screen content=yes> Установить полноэкранный режим
<meta name=browsermode content=application> Режим приложения
<meta name=x5-orientation content=portrait> Установить вертикальный экран
<meta name=x5-fullscreen content=true> Установить полноэкранный режим
<meta name=x5-page-mode content=app> Режим приложения
<meta name=renderer content=webkit> Включить быстрый режим
Мета относится к элементу, который предоставляет метаинформацию о странице, такую как описания и ключевые слова для поисковых систем, а также частоту обновлений. Тег расположен в заголовке документа и не содержит содержимого. Свойства тега определяют пары имя/значение, связанные с документом.
Какие функции уникальны для мобильной версии?<meta content=width=device-width, начальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta content=black name=apple-mobile-web-app-status-bar-style> <meta content=telephone=no name=format-detection>
Первый метатег означает: соотношение ширины документа к ширине устройства должно оставаться 1:1, а максимальное соотношение ширины документа составляет 1,0, и пользователям не разрешается щелкать по экрану, чтобы увеличить представление;
Второй метатег — это частный метатег Safari на устройстве iPhone, который означает: разрешить просмотр в полноэкранном режиме;
Третий метатег также является личным тегом iPhone, который определяет стиль строки состояния в верхней части Safari на iPhone;
Цвет строки состояния (верхней панели экрана) в приложениях веб-приложений;
Значением по умолчанию является значение по умолчанию (белый), которое можно установить на черный (черный) и черно-полупрозрачный (серый полупрозрачный).
Примечание. Если значение черно-полупрозрачное, оно займет позицию страницы в пикселях и будет плавать над страницей (оно будет занимать высоту страницы 20 пикселей — экран Retina на iphone4 и itouch4 имеет высоту 40 пикселей).Четвертый метатег означает: «Прикажите устройству игнорировать цифры на странице как номера телефонов».
Давайте посмотрим на мета мобильных страниц крупных производителей: 1. ТМолл<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, Address=no>2. Таобао
<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport content=начальный масштаб=0,5, максимальный масштаб=0,5, минимальный масштаб=0,5, масштабируемый пользователем=нет>3. Цзиндун
<title>Мобильная версия Jingdong</title><meta name=viewport content=width=device-width, начальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=0;><meta http-equiv=Content -Введите content=text/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta; name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=Истекает контент=-1><meta http-equiv= Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Keywords content=><meta name=description content=>4. NetEase
<title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, максимальный масштаб=1, минимальный масштаб=1, масштабируемый пользователем=no><meta content = телефон=нет имени=обнаружение формата /><meta name=keywords content= /><meta name=description content= />5. Байду
<meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta name=format-detection content=telephone=no>6. Соху
<title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache />< мета-имя = область просмотра, содержимое = ширина = ширина устройства, масштабируемое пользователем = нет, начальный масштаб = 1,0, максимальный масштаб = 1,0, минимальный масштаб = 1,0 /><meta name=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />
----
Имитировать мобильную веб-страницу<meta name=viewport content=width=ширина устройства,масштабируемое пользователем=нет, начальный масштаб=1,0, максимальный масштаб=1,0, минимальный масштаб=1,0″>
область просмотра -> окно (область отображения)
ширина = ширина устройства ширина устройства
область просмотра<metaname = 'viewport'content = width=320><metaname = 'viewport'content = width=device-width>
user-scalable=no/0, разрешать ли масштабирование
начальная шкала=1,0 начальное значение
максимальный масштаб = 1,0
минимальный масштаб = 1,0
-----------------------
<meta name=viewport content=width=ширина устройства, масштабируемое пользователем=нет>
user-scalable=no/0 запрещает пользователям масштабировать страницу
<meta name=viewport content=width=ширина устройства, масштабируемое пользователем=нет, начальный масштаб=1,0″>
начальный масштаб = 1,0 инициализировать коэффициент масштабирования страницы
<meta name=viewport content=width=ширина устройства, начальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=0″>
Maximum-scale=1,0 максимальный коэффициент масштабирования (для отдельных мобильных телефонов Huawei Meta8)
-----------------------
Мета для конкретного устройства Apple:<! — Разрешить запуск веб-страниц как приложений (разрешить добавление на главный экран) — ><meta name=apple-mobile-web-app-capable content=yes><! — Цвет строки состояния — ><meta name=apple- mobile -web-app-status-bar-style content=black>Мета Цзиндун:
<meta name=viewport content=width=device-width, начальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=0″><meta name=apple-mobile-web-app-capable content=yes>< Meta name=apple-mobile-web-app-status-bar-style content=black><!—Запрещенные номера телефонов и адреса электронной почты—><meta name=format-detection содержание=телефон=нет,электронная почта=нет>Мета Таобао:
<meta content=yes name=apple-mobile-web-app-capable><! – щелкните область страницы, чтобы отобразить ее в полноэкранном режиме — ><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-detection/><! – Информация о приложении, сохранение системной истории, эффекты движения – ><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>Другая мета:
<!–Заставьте браузер 360 использовать ядро Chrome для рендеринга страницы–><meta name=renderer content=webkit><!–Попробуйте использовать последний режим IE для рендеринга–><meta http-equiv=X-UA -Совместимый контент=IE= Edge><!–Оптимизирован для портативных устройств, в основном для некоторых старых браузеров, которые не распознают области просмотра, например BlackBerry–><meta name=HandheldFriendly content=true><!–Старый браузер Microsoft–><meta name=MobileOptimized content=320″><!– uc обеспечивает вертикальный экран –><meta name=screen-orientation content=portrait><!– QQ обеспечивает вертикальный экран –><meta name=x5-orientation content=portrait><!– UC обеспечивает полноэкранный режим–><meta name=полноэкранное содержимое=да><!– QQ принудительно выполняет полноэкранный режим –><meta name=x5-fullscreen content=true><!– Режим приложения UC–><meta name=browsermode content=application><!– Режим приложения QQ–><meta name=x5-page- режим содержимого = приложение>Подвести итог
Выше приведено все содержание этой статьи. Я надеюсь, что содержание этой статьи имеет определенную справочную ценность для каждого человека в учебе или работе. Если у вас есть какие-либо вопросы, вы можете оставить сообщение для связи. Спасибо за вашу поддержку VeVb Wulin. Сеть.