タッチがどのように除去する際に図1に示すように、灰色の半透明のマスクIOSシステム要素が生成されます
無効にしたい場合は、セット-webkit-タップハイライトカラーは、最後のビットのアルファ値があること、0で設定されたリンクをユーザーがクリックするiOSの、半透明のグレーのマスクがあるだろう、プロパティの値が0を除去することができるです半透明の灰色マスク
A、ボタン、入力、TEXTAREA { -webkit-TAP-ハイライト色:RGBA(0,0,0,0;)}
それは色の値プレースホルダを変更する2、WebKitのフォーム入力
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}
3、WebKitのフォーム入力ボックスのプレースホルダーテキストは、それをラップすることができます
IOSは、アンドロイドではない〜することができ
、テキストエリアのラベルでラップすることができます〜
4、長い時間のiOS禁止とシステムメニューを誘発しない、長時間禁止IOS&Androidのダウンロードの写真
.css{-webkit-touch-callout: none}
5、IOSとAndroidユーザーがテキストを選択禁止
.css{-webkit-user-select:none}
6、携帯電話のテキストメッセージは、どのように達成するために電子メールを書くために
打电话: <a href="tel:0755-10086">打电话给:0755-10086</a> 发短信,winphone系统无效 <a href="sms:10086">发短信给: 10086</a> 写邮件: <a href=“mailto:[email protected]">[email protected]</a>
7、アナログボタンホバー効果
ボタンのモバイル終了タッチの効果は、何かを表現することができ、ユーザは、比較的良好な経験ですが、モバイルデバイスなしマウスポインタが、我々のニーズを満たしていないホバーCSSを使用しますが、幸いなことに、外国アクティベートは、携帯端末があり、およそ起こることでしたCSSの活性効果。
図1は、本体ontouchstartに直接添加し、携帯端末の同様の効果は、アクティブCSSよりこのように推奨(互換iOS5を+、+部4アンドロイド、WinPhone 8)を活性化することができる
結ぶことによって、完全に互換性のある方法を達成するために2を、 ontouchstartとontouchendコントロールボタンのクラス名に与えられました
8、オーディオ要素とビデオ要素は、自動的にのAndriodとiOSで再生することはできません
レスポンスオプション:タッチスクリーンプレイ
$('html').one('touchstart',function(){ audio.play() })
9、遷移スプラッシュ画面を排除します
ネットワークはそう書かれているが、私はそれをテストしていません
.css{
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-transform-style: preserve-3d; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ -webkit-backface-visibility: hidden; }
図10は、ハードウェアアクセラレーションをオンにします
1、白フラッシュページ解決
滑らかなアニメーションを確実にするために、2を
.css {
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
11、最初の文字を大文字デフォルトを入力して、IOSでの入力時間をキャンセル
<input autocapitalize="off" autocorrect="off" />
12、Androidの音声入力ボタンを削除
input::-webkit-input-speech-button {display: none}
13、H5ページウィンドウは自動的にデバイスの幅に調節し、そして防止ユーザーはページをズームされます
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
図14に示すように、電話番号のためのデジタル識別ページを無視
<meta name="format-detection" content="telephone=no" />
メールアドレスの認識にAndroidプラットフォームを無視して15、
<meta name="format-detection" content="email=no" />
著者:生涯成長している人格
リンクします。https://www.jianshu.com/p/afbec9ae84e7
出典:ジェーンの本は
、著者が著作権を保有しています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。