HTML

• 通話リンク

<a href="tel:+81-3-1234-5678">電話をかける</a>

• メッセージ送信

<a href="sms:+81-90-1234-5678">メッセージ送信</a>

• メール送信

<a href="mailto:contact@example.com">連絡先</a>

• iOS入力欄の自動大文字化回避

<input autocomplete="off" autocorrect="off" />

• WeChatブラウザキャッシュ無効化

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

CSS

iOS互換性

• タップ時の透過背景削除

-webkit-tap-highlight-color: transparent;

• iOSのフォントサイズ調整禁止

body { -webkit-text-size-adjust: 100% !important; }

• placeholderテキストカラー変更

input::-webkit-input-placeholder { color: #999; }

• 長押しメニュー非表示

body { -webkit-touch-callout: none; }

• iOSスクロールパフォーマンス改善

.scroll-container { -webkit-overflow-scrolling: touch; }

Android互換性

• 音声入力ボタン非表示

input::-webkit-input-speech-button { display: none; }

• スクロールバー非表示

::-webkit-scrollbar { width: 0; height: 0; }

汎用互換性

• デフォルトフォームスタイル削除

input, select { -webkit-appearance: none; }

• 画像長押しダウンロード禁止

img { -webkit-touch-callout: none; }

• radio/checkboxのデフォルトスタイル無効化

input[type="checkbox"]::-ms-check { display: none; }

• 文字選択禁止

.no-select { -webkit-user-select: none; -moz-user-select: none; }

• フォーカス時のplaceholder非表示

input:focus::-webkit-input-placeholder { opacity: 0; }

テキスト処理

• 1行省略

.single-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

• 複数行省略

.multi-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

Flexboxレイアウト

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.child {
  flex: 1 0 200px;
  margin: 5px;
}

JavaScript

モバイル対応

• 画面回転検知

window.addEventListener('orientationchange', () => {
  console.log('回転角度:', window.orientation);
});

• WeChat自動再生対策

document.addEventListener('WeixinJSBridgeReady', () => {
  WeixinJSBridge.invoke('showItemMenus', {}, () => {
    document.getElementById('audio').play();
  });
});

• WeChat画面終了

WeixinJSBridge.call('closeWindow');

基本概念

• ==と===の違い

// 型変換あり（==）
1 == '1' // true

// 型比較（===）
1 === '1' // false

• undefinedとnullの違い

// null: 空オブジェクト参照
// undefined: 未定義値

• mouseoverとmouseenter

// mouseover: 親要素と子要素を含むすべての要素
// mouseenter: 親要素のみを対象