ホームページ > 記事 > ウェブフロントエンド > モバイル端末-Notes_html/css_WEB-ITnose
モバイル端末-Notes_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:45923ブラウズ
メタの基本
H5 ページウィンドウはデバイスの幅に自動的に調整され、ユーザーがページを拡大縮小することを禁止します
1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
ビューポート テンプレート - ユニバーサル
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="stylesheet" href="index.css"></head>
モバイル タッチ イベント
ユーザーの指がモバイル上に置かれたときdevice 画面上のスライドによってトリガーされるタッチ イベント
touchstart - 指が画面に触れると発生します。
touchmove – 指が画面上をスライドすると継続的にトリガーされます。通常、ページをスライドするときに、イベントのPreventDefault() を呼び出して、デフォルトの状況が発生するのを防ぎます。ページのスクロールを防止します。
touchend - 指が画面から離れるとトリガーされます。
touchcancel - システムがタッチの追跡を停止するとトリガーされます。たとえば、タッチ プロセス中に、ページ上でプロンプト ボックスが突然アラート () を表示し、このイベントがこの時点でトリガーされます
TouchEvent
touches: 画面上のすべての指に関する情報
targetTouches。 : ターゲット領域内の指に関する指情報
changedTouches : イベントをトリガーした最後の指情報
タッチ終了時、タッチとターゲットタッチ情報は削除されます。changedTouches によって保存された最後の情報は、指情報の計算に最適です
。 Webkit フォーム要素のデフォルトの外観をリセットする方法
.css {-webkit-Appearance:none;}
WebKit フォーム入力ボックスのプレースホルダーの色の値は変更できますか?
input::-webkit-input-placeholder{ color:#AAAAAA;}
input:focus::-webkit-input -placeholder{color:#EEEEEE;}
WebKit フォーム入力ボックスのプレースホルダーのテキストは折り返せますか?
iOS では折り返すことができますか? ~
::-ms-expand は、フォーム選択コントロールのドロップダウン矢印を変更するのに適しています。複数の Property 値を非表示 (display:none) に設定し、背景画像を使用して変更します。望む効果が得られます。
select::-ms-expand {
display: none;
}
audio 要素と video 要素は iOS と Android では自動的に再生できません
解決策: 画面をタッチして再生
$('html').on ('touchstart',function(){
audio.play()
})
ビデオの再生は全画面ではありません
fc3452fab27460e344f4e0cf014e8883
ee63ac768dd03933b41af0c4530263e2a6a9c6d3f311dabb528ad355798dc27d