スマホサイト制作時に設定しておくと良いhtml, css, JavaScript 項目

スマホサイト制作時に設定しておくと良いhtml, css,js項目

1. リンクを押した時に押した領域に色をつける

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の場合