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

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

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

例 :

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

とします。

もちろん

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

でもOKです。

No.1169
11/10 17:42

edit

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

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

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

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

a{
	-webkit-tap-highlight-color: rgba(200,200,200,0.2);	
}

2. 画像がはみ出すのを防ぐ

img{
	max-width: 100%;
	height: auto;
}

3. ボーダーを追加した時に width, height が増えるのを防ぐ

*{
	box-sizing: border-box;
}

4. スマホで見た時に横に移動(左右にグラグラ)するのを防ぐ

<body>
 <div class="wrapper">
  ここに記述していきます。
  </div>
</body>
.wrapper{
	overflow: hidden;
}

5. フォーム入力時に画面がズームするのを防ぐ

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

6. スマホでダブルタップしたときに拡大しないようにするCSS

html {
  touch-action: manipulation;
}

PWA対応 1. ホーム画面用のアイコンを追加する

192px x 192px のアイコンを作成し、以下のタグで指定します。

<link rel="apple-touch-icon" href="/touch-icon.png">

PWA対応 2. 起動までに表示する画像 Sprach Screen を追加する

512px x 512px のアイコン(splash-screen.png)を作成し以下の記述を追加します。

androidの場合 少なくとも以下の3つを manifest.json に 記述します

manifest.json

{
  "name": "my app",
  "background_color": "#000",
  "icons": "/splash-screen.png"
}

manifest.jsonicons の記述方法. https://developer.mozilla.org/ja/docs/Web/Manifest/icons

iphoneの場合

こちらのサイトから作成します https://progressier.com/pwa-icons-and-ios-splash-screen-generator

No.1001
02/01 11:02

edit

携帯スマホサイト
css

スマホサイトをフルスクリーンにしてWEBアプリぽく見せる

● スマホサイトをフルスクリーンにしてWEBアプリぽく見せる

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

PWAの manifest.json で実現できること | hifive開発者ブログ

No.998
01/13 12:02

edit

携帯スマホサイト

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