以前はPC側で作業をしていた時も互換性の問題に遭遇したことがありましたが、正直IEの問題しか頭になく、特に注意する必要がなかったのが原因かもしれません。要約するのが苦手だったので、今はモバイル側で作業しています (もともとモバイル側は簡単だと思っていたので、真剣に考えていませんでした)。だから、私は間違っていました。軽蔑と傲慢さの代償を払うことになりました。
最近、いくつかの互換性のバグに遭遇し、インターネットで情報を見つけました。
まずはビューポートについて話しましょう
まずはテンプレート
<meta charset=utf-8><!--主な目的は、ドキュメントの幅とデバイスの幅を強制的に 1:1 のままにし、最大幅は 1.0 にし、画面のスケーリングを禁止することです。 --><meta content=width=device-width、initial-scale=1.0、maximum-scale=1.0、user-scalable=no name=viewport><!--これは iPhone のプライベート ラベルでもあり、全画面表示が可能ですブラウジング。 --><meta content=yes name=apple-mobile-web-app-capable><!--iPhone のプライベート ラベル、iPhone の上部にあるステータス バーのスタイル。 --><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>
背景画像を書き込むときは左上または 0 0 を追加するのが最善です。そうしないと、モーション エフェクトを記述するときにジャンプしやすくなります。
コピーおよび選択されたテキストは禁止されています
.el { -webkit-user-select: なし; -moz-user-select: なし; -khtml-user-select: なし; }Apple 携帯電話の固定位置にバグがあります。html と body に overflow-x:hidden が設定されているかどうかを確認してください。
さまざまな画面サイズの携帯電話に特別なスタイルを設定する
@media のみの画面と (min-device-width : 320px) および (max-device-width : 375px){}IOS での入力キーボード イベントの keyup、keydown、keypress のサポートはあまり良くありません。ただし、iOS モバイルの入力メソッドを使用して入力した後は、input を使用してキーボードのキーアップ イベントを監視できます。ブラウザでは、キーアップはすぐには応答しません。イベントは削除後にのみ応答できます。
方法: html5 の oninput イベントを使用して keyup を置き換えることができます
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /スクリプト>iOS での入力ボタンのスタイルの設定はデフォルトのスタイルによって上書きされます
解決策は次のとおりです。
入力、テキストエリア { ボーダー: 0; -webkit の外観: なし;}Flex レイアウトは、Android の以前のバージョンでは flex-wrap:wrap 属性をサポートしていませんが、iOS システムでは行の折り返し属性をサポートしています。この問題を解決するにはどうすればよいですか?もちろん、改行は使用せず、代わりに他の方法を使用してください。
.box{ 表示: -webkit-box; /* 古いバージョンの構文: Safari、iOS、Android ブラウザ、古い WebKit ブラウザ */ 表示: -moz-box; /* 古いバージョンの構文: Firefox (バグあり) */ 表示: -ms-flexbox; /* 混合バージョンの構文: IE 10 */ display: -webkit-flex; /* 新しいバージョンの構文: Chrome 21+ */ 新しいバージョンの構文: Opera 12.1、Firefox 22 以降 */}input の placeholder 属性により、テキストが上に配置されます。
line-height: (入力ボックスと同じ高さ) ---PC ソリューション
行の高さ: 通常 ---モバイル ソリューション
type=numberを入力後、PC側に上下の矢印が表示されます
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-Appearance: なし !重要; マージン: 0;}Android および iOS 携帯電話でカメラを開いてフォト アルバム機能を選択できるようにします。
<input class=js_upFile cover1 type=file name=cover accept=image/* capture=camera multiple/>$(function () { //ブラウザの userAgent を取得し、小文字に変換します var ua = navigator.userAgent.toLowerCase( ) ; //Apple の電話かどうかを判断し、そうであれば var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(capture) };})以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。