Skip to content

Instantly share code, notes, and snippets.

@monochromer

monochromer/info.md

Last active April 15, 2021 14:44
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save monochromer/1a00b39dd253bd2332d3 to your computer and use it in GitHub Desktop.
Save monochromer/1a00b39dd253bd2332d3 to your computer and use it in GitHub Desktop.
Download ZIP
Шаблон для мобильных приложений
Raw
mobile-template.css
@-ms-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
/**
* браузер может более корректно расставлять переносы.
*/
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/*убираем выделение в CSS:*/
body {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-focus-ring-color: rgba(255, 255, 255, 0);
outline: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
resize: none;
-webkit-text-size-adjust: none;
}
/*Но оставляем его для полей ввода текста:*/
input, textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
resize: none;
}
Raw
mobile-template.html
<!DOCTYPE html>
<!-- закэшировать приложение для offline работы, если это возможно -->
<html manifest="default.appcache" lang="ru-RU">
<head>
<meta charset="utf-8">
<link rel="manifest" href="manifest.json">
<!-- Просим IE переключиться в последний режим -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="ru">
<!-- Убираем возможность масштабировать -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimal-ui, shrink-to-fit=no">
<meta name="HandheldFriendly" content="True">
<!-- Запрещаем распознавать номера телефонов и адреса, а так-же выделять их: -->
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
<!-- Это помогает на некоторых девайсах избавиться от неадекватных попыток восстановления страницы. То есть попытки адекватные, но не все девайсы восстанавливают страницу без багов. -->
<meta http-equiv="Cache-Control" content="no-cache">
<!-- Отключаем панель работы с изображениями: -->
<meta http-equiv="imagetoolbar" content="no">
<!-- Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов -->
<meta http-equiv="cleartype" content="on">
<!-- Просим IE оформлять все в классическом стиле без учета текущей темы операционки: -->
<meta http-equiv="msthemecompatible" content="no">
<!-- чтобы приложение открылось в полноэкранном режиме -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- заголовок веб-приложения в iOS -->
<meta name = "apple-mobile-web-app-title" content = "AppTitle">
<!-- корректируем верхнюю полоску в iPhone: -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" href="images/favicon.ico">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<!-- картинки для Apple устройств: -->
<link rel="apple-touch-startup-image" href="images/startup.png">
<link rel="apple-touch-icon" href="images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<!-- SVG-иконка для закрепленной вкладки в Safari -->
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">
<meta name="application-name" content="Title">
<meta name="msapplication-tooltip" content="Description">
<meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="#990000">
<meta name="msapplication-starturl" content="https://exmaple.com">
<meta name="msapplication-TileImage" content="images/custom_icon_144.png">
<meta name="msapplication-square70x70logo" content="images/custom_icon_70.png">
<meta name="msapplication-square150x150logo" content="images/custom_icon_150.png">
<meta name="msapplication-square310x310logo" content="images/custom_icon_310.png">
<meta name="msapplication-wide310x150logo" content="images/custom_icon_310x150.png">
<!-- SEO -->
<title>Document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="(c)">
<meta http-equiv="Reply-to" content="mail@yandex.ru">
</head>
<body>
<!-- Этой строкой просим его не показывать нам табличку про то, что скрипты опасны и т.д. и т.п., а просто брать и включать JS -->
<!-- saved from url=(0014)about:internet -->
<input
type="text"
autocomplete="on"
spellcheck="true"
autocapitalize="off"
autocorrect="off"
autofocus
required
maxlength="30"
pattern="^[А-Яа-я\s\-\_0-9]+$"
class="input_name"
id="input_name"
placeholder="Иван Иванович"
x-webkit-speech
>
<noscript class="no_script_message">
У вас отключен JavaScript. Сайт может отображаться некорректно. Рекомендуем включить JavaScript.
</noscript>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment