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">
<!-- コンテンツここから -->
<a name="detail_top"></a>
function is_smp(){
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
return true;
}
}
$(function() {
if ( is_smp() ){
location.href = "#detail_top";
}
});
HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
設定できる値は以下のとおり
apple-mobile-web-app-capable : フルスクリーンにするかどうか？
【yes】フルスクリーンにする
【no】フルスクリーンにしない
apple-mobile-web-app-status-bar-style : （画面一番上のステータスバーの表示方法）
【default】標準
【black】反転（黒バック）
【black-translucent】（透明）
ただしページ内リンク以外のリンクがあるとSafariが別で立ち上がるので、jQuery-uiなどを使ってリンクを組み立てるか 次の「jquery_mobile_js_link.js」を使ってリンクを押すとjavascriptで画面遷移するように変更する必要があります。
<script src="jquery_mobile_js_link.js"></script>
jquery_mobile_js_link.js
// Initialization
jQuery.mobile_js_link = {
init: function() {
for (module in jQuery.mobile_js_link) {
if (jQuery.mobile_js_link[module].init)
jQuery.mobile_js_link[module].init();
}
}
};
jQuery(document).ready(jQuery.mobile_js_link.init);
jQuery.mobile_js_link.rewrite = {
init: function() {
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){}
else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){}
else{
return;
}
var all_tags = $('a');
all_tags.each(function(){
var url = $(this).attr('href');
$(this).attr('href','#');
$(this).click(function(){
location.href = url;
});
});
}
};
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にするという方法で回避できます。