一部のモバイルエンドの問題

タッチがどのように除去する際に図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
出典:ジェーンの本は
、著者が著作権を保有しています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。

おすすめ

転載: www.cnblogs.com/fs0196/p/12553271.html