iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。
例 :
<input type="text" pattern="\d*">
とします。
もちろん
<input type="number" pattern="\d*">
でもOKです。
スマホサイト制作時に設定しておくと良い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
HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">
サイトのトップ、ディレクトリに manifest.json ファイルを以下の内容で作成します
{
"name": "マイスマホアプリ",
"short_name": "マイスマホアプリ",
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#fff",
"theme_color": "#fff"
}
iPhone等スマホサイトではWEBページのフォーム入力の時に自動的に画面が拡大する事があるのですが、これは
フォームのフォントサイズが16pxより小さい
の時に起きます。
そこでこれをやめさせるには以下 A,B,C のいずれかの方法を使用します。
input,select,textarea{ font-size:16px; }
例:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
何かのタイミングで以下のJavaScriptを実行して動的にviewportを書き換えると拡大率が変更(下記の例では等倍)できます。
$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
いくら viewport で user-scalable=no を設定していても JavaScriptでフォームに強制的にフォーカスした時は画面が拡大されることがあります。
その時は
$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); $("#hoge").css("font-size",'16px'); $("#hoge").trigger("focus"); $("#hoge").css("font-size",'');
とやって無理やり16pxにするという方法で回避できます。