スマホサイト制作時に設定しておくと良いhtml, css,js項目
a{
-webkit-tap-highlight-color: rgba(200,200,200,0.2);
}
img{
max-width: 100%;
height: auto;
}
*{
box-sizing: border-box;
}
<body>
<div class="wrapper">
ここに記述していきます。
</div>
</body>
.wrapper{
overflow: hidden;
}
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
html {
touch-action: manipulation;
}
192px x 192px のアイコンを作成し、以下のタグで指定します。
<link rel="apple-touch-icon" href="/touch-icon.png">
512px x 512px のアイコン(splash-screen.png)を作成し以下の記述を追加します。
androidの場合 少なくとも以下の3つを manifest.json に 記述します
manifest.json
{
"name": "my app",
"background_color": "#000",
"icons": "/splash-screen.png"
}
manifest.json の icons の記述方法. https://developer.mozilla.org/ja/docs/Web/Manifest/icons
iphoneの場合
こちらのサイトから作成します https://progressier.com/pwa-icons-and-ios-splash-screen-generator