モバイル端末互換性の問題(コード住を推奨し、更新を継続しますよ～)

最近モバイル端末の開発が多くて、最近出会った互換性の問題を整理して、へへへ(主に私が新しく買ったキーボードを試してみたいです～)
1.1 pxモバイル側のソリューション
最初はもちろんモバイル側の互換性の適合から始まりましたが、詳細な説明については、前のブログで大まかに説明しましたが、1 pxのモバイル側の解決策は、異なるdprのデバイスで1 pxのcssスタイルの画素が異なる効果を生むことが問題の原因です.

古いプロジェクトでは、css 3のtransformを使用して偽クラス::after/::beforeを結合してスケール解決することができます.

新しい項目については、viewport+remを使用してスケールをグローバルに設定し、グローバルルート要素のremを設定し、ヘッダの元の状態を

に設定できます.

<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

js動的変更の部分:

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

詳細はこちらへ
2.番号が12 px未満の場合、アンドロイドの文字は垂直に中央に位置できない
3.モバイル端末実現、キーボードクリック、ユーザー喚起検索機能(enterキー?)

<form action="javascript:void(0)">
<input
      name="search"
      v-model="searchValue"
      placeholder="            "
      ref="searchInput"
      @keyup.13="searchAllData()" />
</form>

Tips:

アンドロイドでもアップルの携帯電話でも、検索ボタンのkeycodeは13で、ここはvueプロジェクトで、ボタン修飾子を使うことができます.

はtype=「search」でアンドロイドとアップルの検索ボタンを統一する.

inputラベルの外にformフォームを装着し、action=「javascript:void 0」を設定する必要があります.action属性は重要で、検索機能を実現するために省略できません.

オートフォーカス機能を追加するには、現在のinputというdom要素を取得してからfocus()メソッドを追加することができます.

this.$nextTick(() => {
this.$refs.searchInput.focus()
 })

4.position測位を使用する場合、css 3におけるtransformのレベルはposition測位より高い
中には積層文脈の知識理解について、具体的には鑫旭大のブログを参考にすることができます.
5.微信内蔵ブラウザはiosで上位レベルに戻ってもページは更新されませんが、アンドロイドはページを再更新します.
(1)このような問題に対して,当時の製品のシナリオはキャッシュを保持することであり,上位ページに戻るとユーザのフィルタ記録が記憶され,Androidのページ更新現象に対してはユーザのフィルタ条件をsessionStorageに記録し,上位ページに戻るとキャッシュから記録を読み出し,再要求することであった.ユーザーのジャンプページをリスニングする動作には、次の2つのケースがあります.

vue内蔵vue-routerルーティングジャンプ

jsでwindowを使用します.lcaotion.hrefジャンプ

この2つのジャンプ方式に対して、リスニングイベントonbeforeunloadを使用する際に、互換性の問題が発生しました8(2)アップルがキャッシュを残したくない場合、リフレッシュを渇望し、新しいソリューション:リスニングページのpageshowイベント

 if(isIOS()){
	  window.addEventListener('pageshow', function (event) {
	        if (event.persisted || window.performance &&
	                window.performance.navigation.type == 2)
	        {
	            location.reload();
	        }
	    },false);
    }

6.微信内蔵ブラウザの深層ネストのwebview、iosはたまに最後までスライドすることができて、スライドするのが困難で、内部はスライドすることができなくて、1 pxを後退する必要があります
この問題は同じ理屈で上部にスライドすると、スライドが困難になり、内部がスライドできなくなり、1 px後退する必要があります.解決策:この1 pxの上で、くだらない話は多く言わないで、コードをつけます!

/**
 *      ios
 */
export function isIOS () {
  return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
}
/**
 *        
 */
export function isWXBrowser () {
  var ua = window.navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') return true
  return false
}

//       ，    ios         1px
/**
 *
 *       IOS           ,              bug
 * @export
 * @param {obj} e      
 */
export function fixIosScroll (e) {
  if (!isIOS && !isWXBrowser) return
  const scrollHeight = e.scrollHeight
  const scrollTop = e.scrollTop
  const clientHeight = e.clientHeight
  //       ,  1px
  if (scrollTop === 0) {
    e.scrollTop = 1
    return
  }
  //      ,  1px
  if (scrollHeight - scrollTop === clientHeight) {
    e.scrollTop = scrollTop - 1
  }
}

7.微信共有機能、偶現初期化に失敗し、デフォルトでは現在のwindowを直接共有する.locationページでは、vueのルーティングrouterを使用して現在のページを取得できません.
微信jssdkの初期化に失敗した場合、vueプロジェクトでは現在のページをデフォルトで共有することができず、解決策は、現在共有する必要があるページをジャンプする際にvue-routerルーティングを使用せずにジャンプするのではなく、windowである.location,hrefジャンプ,windowを変更する.locationの値、初期化に失敗した場合のデフォルトの現在のページの共有
8.微信ブラウザのモバイル端末はwindowをサポートしていない.Openはonbeforeunloadページアンインストールイベントをサポートしない新しいウィンドウを開きます
ページアドレスの変化を傍受するとき、私が使い始めたのはonbeforeunloadイベントで、vue-routerジャンプとwindowに使用しました.location.hrefジャンプの両方が効果的です.Googleブラウザに内蔵されたモバイル端末シミュレータを使っている上にok、ok、ok......、But......(黒い顔...)私が携帯電話の上で本物の機械を調整する時、意外にも役に立たなくて、効果がありません!!!
だから、私はこのonbeforeunloadを放弃せざるを得なくて、??最後に、vue-routerジャンプはルーティングに内蔵されたフック関数beforeRouteLeaveを使用して追加される(window.location.hrefジャンプは傍受できないよ);window.location.hrefはジャンプを追加したイベントでキャプチャされます.
また、H 5が新たに追加された歴史記録の傍受事件は、汎用性が高くない.

window.onpopstate:historyを呼び出すとgo()、history.back()、history.forward()ブラウザのいくつかの前進後退時にトリガーされます.PushState()replaceState()メソッドは

をトリガーしません.

window.onhashchange:現在のURLのアンカー部分('#'番号で開始)hash値が変更すると

がトリガーされます.
9.input入力ボックスを使用して入力すると、iosにソフトキーボードが表示され、ページが上に上がり、キーボードを閉じ、ページの下に白を残す
10.微信H 5中ios有页回弹的效果,安卓没有
11.モバイルブラウザ(少なくとも微信環境)で、http://XXXX.pdfpdfファイルをプレビューして、iosは直接プレビューすることができて、アンドロイドは先にブラウザを回転してダウンロードしてから見ることができます
解決策:pdfh 5を導入する.jsプラグインは、別のhtmlサイトのリンクページをジャンプし、このページにdomを作成し、canvasとsvgの2つのレンダリングモードを使用してプレビューをサポートします.

npm install --save pdfh5

<template>
  <div id="app">
	<div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App',
	data() {
	  return {
	    pdfh5: null
	  };
	},
	mounted() {
		//   
	  this.pdfh5 = new Pdfh5("#demo", {
		pdfurl: "../../static/test.pdf"
	  });
	  //      
	  this.pdfh5.on("complete", function (status, msg, time) {
		console.log("  ：" + status + "，  ：" + msg + "，  ：" + time + "  ，   ：" + this.totalNum)
	  })
	}
  }
</script>


//*********************************  js  ****************************
//1.  css
<link rel="stylesheet" href="css/pdfh5.css" />
//2.  div
<div id="demo"></div>
//3.    js
<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
//4.   
var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./default.pdf"
});

12.ios微信は初めてh 5ページを開き、下部には履歴ナビゲーションがない.
解決策:空の履歴を手動で追加

/**
 *      ios
 */
export function isIOS () {
  return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
}
/**
 *        
 */
export function isWXBrowser () {
  var ua = window.navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') return true
  return false
}

 if (isIOS() && isWXBrowser()) {
      window.history.pushState({}, '', '')
    }

13.アップルiOS 11、iphoneX以上にセキュリティエリア互換性がある
事故は、1回のAppにH 5ページが埋め込まれていることから発生し、h 5ページの底に灰色の空白領域が現れ、底部が選択ボックスをポップアップすると、このグレーバーによって下の一部が遮られ、iphoneX機種であることを考慮すると、安全領域の遮断とみなすことができ、同様にiphone 6機型ではこの問題はない.解決策:htmlファイルにヘッダのmetaを設定し、viewport-fitをcoverに設定する

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

マスクされたポップアップレイヤに設定

padding-bottom: constant(safe-area-inset-bottom); /*    iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /*    iOS >= 11.2 */

プロジェクトは古いプロジェクトなので、デザインされたページが多いので、グローバルなbodyが設定されていないので、どのページに問題が発生したかはこの方法で解決します.しかし、モバイル端末の新しいプロジェクトは、開始の適合を行う際に、safe-area-inset-bottomをグローバルに設定することをお勧めします.
14.iosは微信ブラウザのh 5ページにページのリバウンド効果があり、ページに輪番のswiperコンポーネントが存在する場合、スライド中にページのジッタが発生する
さて、この问题は私は长い间探して、最初は偶発的な问题だと思っていましたが、后で1回の操作の排除はあまり正しいことを発见しませんでした.このニマはあなたが最后まで滑って、手を止めて手を放さない限り、ページのジッタが现れました.このジッタは次の画像と一绪に现れました.解决方法:ページのスライドイベントをリスニングし、スライドトリガ时に、轮播のアニメーションを停止し、OK～～fine next!
15.offsetLeftとoffsetTopの使用
offsetLeft値とoffsetTop値の取得は親要素とは関係なく、前のレベルの位置決め要素(position:staticを除く;fixed,relative,absoluteなどのすべての位置決め)と関係があり、前の位置決め要素を使用する距離です.
16.scrollTo(0,0)とscrollTop=0
アップルの低バージョンの携帯電話ではdomの使用はサポートされていません.scrollTo(0,0)このメソッドを使用するとエラーが表示されます.言い換えればdomを用いる.scrollTop=0で正常に使用できます