移動端兼容性問題集

1.input獲取焦點時，頁面被放大

// ios全屏
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
//安卓禁止識別郵箱
<meta content="email=no" nam="format-detection" />

//ios禁止識別長串數字爲電話
<meta content="telephone=no" name="format-detection" />

// ios的safari頂端狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> // 可選default（白色）、black（黑色）、black-translucent（灰色半透明，網頁充滿整個屏幕，狀態會蓋在網頁之上）

// ios自動增加圖標效果
<meta name="apple-mobile-web-app-title" content="web app name"/>

// 使用原圖作爲APP的圖，使各平臺的圖標保持一致
<link rel="apple-touch-icon-precomposed" href="app.png"/>

2.ios input輸入時白屏

這個問題貌似只有再ios9中才有
解決方法：在input的父元素上添加相對定位就行了，非常神奇

style="postion:relative;"

3.底部軟鍵盤被遮擋

//input輸入框彈起軟鍵盤的解決方案。
var bfscrolltop = document.body.scrollTop;
$("input").focus(function () {
  document.body.scrollTop = document.body.scrollHeight;
}).blur(function () {
  document.body.scrollTop = bfscrolltop;
});

4.new Date()設置日期在IOS的兼容問題

var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));

5.ios頁面滾動不流暢
首先你可能會給頁面的html和body增加了height: 100%, 然後就可能造成IOS上頁面滑動的卡頓問題。

解決方案是：
1.讓html和body固定100%（或者100vh），
2.然後再在內部放一個height:100%的div，設置overflow-y: auto;和-webkit-overflow-scrolling: touch;

.scroll-box {
  /* 模態框之類的div不能放在這個容器中 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

6.position:fixed/absolute隨屏幕滾動
注：ios裏貌似不支持fixed。。。這裏主要指absolute
在position:fixed/absolute內加入：

-webkit-transform: translateZ(0);

抖動情況，則在內容區域，加入：

overflow-y: auto;

7.a標籤、input標籤、button標籤點擊後產生藍色邊框

a,button,input,textarea { 
   outline:none;
   -webkit-tap-highlight-color: rgba(0,0,0,0); 
}   
//winphone下
<meta name="msapplication-tap-highlight" content="no">

8.IOS移動端click時間300ms延遲
移動端點擊後，在300ms內再次點擊屏幕，系統會認爲是雙擊事件，這是區分單擊和雙擊屏幕縮放歷史原因造成
解決方案：

// 1.fastclick.js可以解決在手機上點擊事件的300ms延遲
var FastClick = require('faskclick')
FastClick.attach(document.body, options)

window.addEventListener('load', function(){
  FastClick.attach(document.body);
});

// 2. touchend代替tap事件並阻止touchend的默認行爲；
$('#id').on('tap, function(event){
  event.preventDefault();
});

3. 延遲一定的時間300ms+來處理時間
$('#id').on('tap', function(event){
  setTimeout(function(){
    ...
  }, 320);
});

9.Ios鍵盤換行變爲搜索？
```sh
<form>
  <input text="search"/>
</form>

10.iOS 1px border 實現

iOS設備上，由於retina屏的原因，1px 的 border 會顯示成兩個物理像素,從iOS 8開始，iOS 瀏覽器支持 0.5px 的 border，但是在 Android 上是不支持的，0.5px 會被認爲是 0px，所以這種方法，兼容性是很差的。

另外一種方法是背景漸變，

CSS3 有了漸變背景，可以通過漸變背景實現 1px 的 border，實現原理是設置 1px 的漸變背景，50% 有顏色，50% 是透明。

@mixin commonStyle() {
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
}


@mixin border($border-color) {
  @include commonStyle();
  background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);
}

11.ios與android的標籤表現不一致的問題
ios和android的select標籤還有input[type=”button”]在真機上的樣式會有區別，所以我們可以加上這一條css來消除ios和android的樣式差別：

-webkit-appearance: none;

12.打電話發短信

  <a href="tel:135111111111">打電話給:135111111111</a>
  <a href="sms:10086">發短信給: 10086</a>
  <a href="mailto: [email protected]">[email protected]</a>

13.禁止複製、選中文本

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

14.ios默認輸入框內有陰影，清除陰影

input,textarea {
  border: 0; // 方法1
  border-color: transparent; // 方法2
  -webkit-appearance: none; // 方法3
  appearance: none;
}

15.flex佈局兼容低版本的安卓

.box{
    display: -webkit-box;
    /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本語法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本語法: IE 10 */
    display: -webkit-flex; /* 新版本語法: Chrome 21+ */
    display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}

16.input的placeholder屬性在文本位置上偏上

line-height: （和input框的高度一樣高）---pc端解決方法
line-height：normal ---移動端解決方法

17.input的text=number，在PC端中上下箭頭

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

18.移動端video、audio標籤中的autoplay失效
由於安卓和ios系統禁止自動播放和js自動觸發，必須是用戶去觸發生效

document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

19.ios系統旋轉屏幕時，會自動調整字體大小

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  text-size-adjust:100%;
}

20.禁止ios彈出各種窗口操作

-webkit-touch-callout:none

21.安卓和ios6瀏覽器上calc的兼容性處理

div {
  width: 95%;
  width: -webkit-calc(100% - 50px);
  width: calc(100% -50px;)
}

ios滾動卡頓

-webkit-overflow-scrolling: touch;

23.衛星瀏覽器中跳轉網頁，window.location.href無效

var aClick = document.createElement('a');
aClick.setAttribute('href', 'www.baidu.com');
aClick.Click()

24.禁止ios長按時不觸發系統的菜單，禁止ios&Android長按時下載圖片

div {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

25.ios下取消input在輸入的時候英文字母的默認大寫（autocapitalize），關閉ios輸入自動修正（autocorrect）

<input autocapitaliza="off" autocorrent="off"/>

26.ios自帶輸入法輸入中文連續出發多次input事件

var falg = false;
$('#id').on({
  'compositionstart': function(){
    flag = true;
  },
  'compositionend': function(){
    flag = false;
    if(!flag){
      doSomethingFunction();
    }
  },
  'input propertychange': function(){
    if(!flag){
      doSomethingFunction();
    }
  }
});

28.css僞類:active
如果需要按下激活狀態，推薦使用 js 新增一個 className
iOS上的幾乎任何瀏覽器，定義元素的僞類:active都是無效；
Android上，Android Browser和Chrome都支持僞類:active，其它第三方瀏覽器有部分不支持；
定義了:active並且當前瀏覽器環境支持，當手指在滾動或者無意間的劃過時:active狀態都會被激活；

移動端兼容性問題集

SQL優化-20231016

webpack4 TypeError: htmlWebpackPlugin.getHooks is not a function

移動端兼容性問題集

git操作清單

vue element-UI table嵌套表格無法更新視圖

移動端web如何在真機上進行調試

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結