WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「iPhone」での検索

iPhoneでフォーム入力時に 数字だけのキーボードを表示させる

iPhoneやandroidなどスマホでフォーム入力時に 数字だけのキーボードを表示させるには
pattern を使用します。

例 :

<input type="text" pattern="\d*">

とします。

もちろん

<input type="number" pattern="\d*">

でもOKです。

No.1169
11/10 17:42

edit

html5
携帯スマホサイト
iPhone
フォーム

iPhone, iPadなどのWEB画面表示を確認する

Responsinator

http://www.responsinator.com/

Responsive Web Design Testing Tool

http://mattkersley.com/responsive/

No.1018
04/04 15:58

edit

iPhone
iPad

iPhoneのsafariでフォーム入力の時に自動的に画面拡大するのを防ぐ

iPhone等スマホサイトではWEBページのフォーム入力の時に自動的に画面が拡大する事があるのですが、これは

フォームのフォントサイズが16pxより小さい

の時に起きます。

そこでこれをやめさせるには以下 A,B,C のいずれかの方法を使用します。

■A. フォームのフォトサイズを16px以上にする。(CSSファイルに記述)

input,select,textarea{
   font-size:16px;
}

■B. viewport 設定を行う(HTMLファイルに記述)

例:

<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" />

■C. jQueryを使って任意のタイミングで拡大率を元に戻す(JavaScript)

何かのタイミングで以下のJavaScriptを実行して動的にviewportを書き換えると拡大率が変更(下記の例では等倍)できます。

$("meta[name='viewport']").attr('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');

■ JavaScriptで強制的にフォーカスさせたときに拡大するのを防ぐ

いくら 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にするという方法で回避できます。

No.936
01/14 13:50

edit

携帯スマホサイト
iPhone
jQuery