0、ios 等移動端input點擊獲取不到焦點的問題

input{
      -webkit-user-select: auto!important;
      -khtml-user-select: auto!important;
      -moz-user-select: auto!important;
      -ms-user-select: auto!important;
      -o-user-select: auto!important;
      user-select: auto!important;
    }

1、關(guān)閉iOS鍵盤首字母自動大寫

<input type="text" autocapitalize="off" />

2、禁止文本縮放

{ -webkit-text-size-adjust: 100%}

3、移動端如何清除輸入框內(nèi)陰影
在iOS上，輸入框默認(rèn)有內(nèi)部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關(guān)閉：

input,
textarea {
    border: 0; 
    -webkit-appearance: none; 
}

4、忽略頁面的數(shù)字為電話，忽略email識別

<meta name="format-detection" content="telephone=no, email=no"/>

5、快速回彈滾動

.xxx {
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
}
/*PS：iScroll用過之后感覺不是很好，有一些詭異的bug，這里推薦另外一個 iDangero Swiper，這個X件集成了滑屏滾動的強大功能（支持3D），而且還有回彈滾動的內(nèi)置滾動條，官方地址：
http://www.idangero.us/sliders/swiper/index.php*/

6、移動端禁止選中內(nèi)容

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

7、移動端取消touch高亮效果
在做移動端頁面時，會發(fā)現(xiàn)所有a標(biāo)簽在觸發(fā)點擊時或者所有設(shè)置了偽類 :active 的元素，默認(rèn)都會在激活狀態(tài)時，顯示高亮框，如果不想要這個高亮，那么你可以通過css以下方法來禁止：

.xxx {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

8、如何禁止保存或拷貝圖像
通常當(dāng)你在手機或者pad上長按圖像 img ，會彈出選項 存儲圖像 或者 拷貝圖像，如果你不想讓用戶這么操作，那么你可以通過以下方法來禁止：PS：需要注意的是，該方法只在 iOS 上有效。

img {
    -webkit-touch-callout: none;
}

9、解決字體在移動端比例縮小后出現(xiàn)鋸齒的問題：

-webkit-font-smoothing: antialiased;

10、柵格布局：可以改變盒子模型的計算方式方便你設(shè)置寬進行自適應(yīng)流式布局

box-sizing:border-box;

11、移除ios的input的樣式

input[type=input]{-webkit-appearance:none;}
/*移除ios的樣式，但這個屬性存在bug，會導(dǎo)致iso無法獲取checkbox值，
給這個元素重新賦上
input[type=checkbox]{-webkit-appearance:checkbox;}
就不會報錯了。*/

12、按鈕被按下效果的實現(xiàn)需要給a標(biāo)簽加a:active屬性和添加一段空函數(shù)

document.body.addEventListener('touchend', function () { });

13、解決去掉下邊框。

-webkit-border-bottom:none;

14、英文文本換行(不拆分單詞)

word-wrap:break-word;

15、字體大小盡量使用pt或者em，rem，代替px。

16、設(shè)置input里面placeholder字體的大小

::-webkit-input-placeholder{ font-size:10pt;}

17、wap頁面有img標(biāo)簽，記得加上display：block；屬性來解決img的邊緣空白間隙的1px像素。如果圖片要適應(yīng)不同的手機要設(shè)置width:100%;而且不能添加高度。

=======================================================

18. 移動端如何清除輸入框內(nèi)陰影
    在iOS上，輸入框默認(rèn)有內(nèi)部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關(guān)閉：

input,
textarea {
　　border: 0; 
　　-webkit-appearance: none; 
}

19. 移動端禁止選中內(nèi)容
    如果你不想用戶可以選中頁面中的內(nèi)容，那么你可以在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;            
}
兼容IE6-9的寫法：
/*onselectstart="return false;" unselectable="on"*/

20.audio元素和video元素在ios和andriod中無法自動播放
應(yīng)對方案：觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})

21.手機拍照和上傳圖片

<input type="file">的accept 屬性
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">

ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認(rèn)外觀丑陋

22. 消除transition閃屏

.css{
    
    -webkit-transform-style: preserve-3d;
    
    -webkit-backface-visibility: hidden;
}

23.開啟硬件加速 解決頁面閃白 保證動畫流暢

 .css {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  }

設(shè)計高性能CSS3動畫的幾個要素
盡可能地使用合成屬性transform和opacity來設(shè)計CSS3動畫，
不使用position的left和top來定位
利用translate3D開啟GPU加速

24.video iOS不顯示問題 寫成下面這樣就好了

<video controls="controls" autoplay="autoplay">
      <source src="xxxx.mp4" type="video/mp4" />
</video>

25、winphone系統(tǒng)a、input標(biāo)簽被點擊時產(chǎn)生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

26、ios input框加了disabled的屬性樣式的設(shè)置不上的兼容性問題

input[disabled],input:disabled,input.disabled{
color: #999;
-webkit-text-fill-color:#999;
-webkit-opacity:1;
opacity: 1;
}

27. css去除移動端的滾動條

  ::-webkit-scrollbar {
    width: 0px;
    }
    
    ::-webkit-scrollbar-track {
    background-color: none;
    }
    
    ::-webkit-scrollbar-thumb {
    background-color: none;
    }
    
    ::-webkit-scrollbar-thumb:hover {
    background-color: none;
    }
    
    ::-webkit-scrollbar-thumb:active {
    background-color: none;
    }




/*修改滾動條樣式*/
div::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #333;
}
div::-webkit-scrollbar-corner{
  background: #179a16;
}

28.解決ios復(fù)制內(nèi)容的兼容問題

let oInput = document.createElement("input"); 
oInput.value = "recheyouping"; 
oInput.readOnly="readOnly"; 
document.body.appendChild(oInput); oInput.select(); // 選擇對象 
oInput.setSelectionRange(0, 20); //兼容ios-safari核心代碼 
document.execCommand("Copy"); // 執(zhí)行瀏覽器復(fù)制命令 
oInput.className = "oInput"; 
oInput.style.display = "none"; this.$message.show({ msg: "復(fù)制成功！" });

29.計算精度缺失0.1+0.3！==0.4的問題
1.將數(shù)字轉(zhuǎn)成整數(shù)
這是最容易想到的方法，也相對簡單

function add(num1, num2) {
 const num1Digits = (num1.toString().split('.')[1] || '').length;
 const num2Digits = (num2.toString().split('.')[1] || '').length;
 const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
 return (num1 * baseNum + num2 * baseNum) / baseNum;
}

但是這種方法對大數(shù)支持的依然不好

30.獲取當(dāng)月的天數(shù)

var day = new Date(2018,10,0);   //最后一個參數(shù)為0,意為獲取2018年10月一共多少天
console.log(day.getDate());  //31

31.檢測黑暗模式
隨著黑暗模式的普及，ios設(shè)備中啟用了黑暗模式，那么將你的應(yīng)用程序切換到黑暗模式，可以利用媒體查詢來使這項任務(wù)變得簡單。

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches。
// 測試
console.log(isDarkMode())。

32.滾動到頂部
簡單的滾動元素的方法是使用scrollIntoView方法。添加行為。"smooth "來實現(xiàn)平滑的滾動動畫。

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })。

33.滾動到底部
就像scrollToTop方法一樣，scrollToBottom方法也可以用scrollIntoView方法輕松實現(xiàn)，只需將塊值切換為結(jié)束即可

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })。

2.三方庫

這個是比較全面的做法，推薦2個我平時接觸到的庫

1).Math.js

專門為 JavaScript 和 Node.js 提供的一個廣泛的數(shù)學(xué)庫。支持?jǐn)?shù)字，大數(shù)字(超出安全數(shù)的數(shù)字)，復(fù)數(shù)，分?jǐn)?shù)，單位和矩陣。 功能強大，易于使用。

官網(wǎng)：mathjs.org/

GitHub：github.com/josdejong/m…

2).big.js

官網(wǎng)：mikemcl.github.io/big.js

GitHub：github.com/MikeMcl/big…

3）若干，不一一列舉了

這幾個類庫都很牛逼，可以應(yīng)對各種各樣的需求，不過很多時候，一個函數(shù)能解決的問題不需要引用一個類庫來解決。

框架

1. 移動端基礎(chǔ)框架
   zepto.js 語法與jquery幾乎一樣，會jquery基本會zepto~
   iscroll.js 解決頁面不支持彈性滾動，不支持fixed引起的問題~ 實現(xiàn)下拉刷新，滑屏，縮放等功能~
   underscore.js 該庫提供了一整套函數(shù)式編程的實用功能，但是沒有擴展任何JavaScript內(nèi)置對象。
   fastclick 加快移動端點擊響應(yīng)時間
   animate.css CSS3動畫效果庫
   Normalize.css Normalize.css是一種現(xiàn)代的、CSS reset為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案

2. 滑屏框架
   適合上下滑屏、左右滑屏等滑屏切換頁面的效果
   slip.js
   iSlider.js

fullpage.js
swiper
3.瀑布流框架
masonry
工具推薦
caniuse 各瀏覽器支持html5屬性查詢
paletton 調(diào)色搭配

=========================================================================

對于網(wǎng)站字體設(shè)置
移動端項目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
###移動和pc端項目：
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

===========================================================================================

有關(guān)Flexbox彈性盒子布局一些屬性
不定寬高的水平垂直居中

.xxx{
        position:absolute;
        top:50%;
        left:50%;
        z-index:3;
        -webkit-transform:translate(-50%，-50%)；
        border-radius:6px;
        background:#fff;
}
    /*[flexbox版]不定寬高的水平垂直居中*/
.xx{
        justify-content:center;/*子元素水平居中，*/
        align-items:center;/*子元素垂直居中;*/
        display:-webkit-flex;
}
    /*單行文本溢出*/
.xx{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
}
      /*多行文本溢出*/
.xx{
        display:-webkit-box !importmort;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;/*(數(shù)字2表示隱藏兩行)*/
}
    /*使用流體圖片*/
img{
        width:100%;
        height:auto;
        width:auto\9;
}
    /*一像素邊框（例子:移動端列表的下邊框）*/
    .list-iteam:after{
            position: absolute;
            left: 0px;
            right: 0px;
            content: '';
            height: 1px;
            transform: scaleY(0.5);
            -moz-transform: scaleY(0.5);
            -webkit-transform:scaleY(0.5);
            background-color: #e3e3e3;
        }

針對適配等比縮放的方法:

@media only screen and (min-width: 1024px){
        body{zoom:3.2;} 
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
        body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
        body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
        body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
        body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
        body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
    body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
        body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
        body{zoom:1.125;}
}

less屏幕適配

//適配屏幕
//1rem=50px
.adopter(@width: 320px) {
    @media screen and(min-width: @width) {
        html {
            font-size: round(@width/15, 2);
        }
    }
}

.adopter(320px);
.adopter(360px);
.adopter(375px);
.adopter(384px);
.adopter(400px);
.adopter(414px);
.adopter(424px);
.adopter(460px);
.adopter(480px);
.adopter(540px);
.adopter(720px);
.adopter(750px);
.adopter(830px);
.adopter(960px);

/* 屏幕的適配 這里是less生成的css 把每個屏幕的寬度分成了15分 如果你現(xiàn)在沒有合適轉(zhuǎn)換的less 或者sass的X件用這個  搭配vscode cssrem也是很好用的*/
@media (min-width: 320px) {
  html {
    font-size: 21.33px;
  }
}
@media (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media (min-width: 375px) {
  html{
    font-size: 25px;
  }
}
@media (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media (min-width: 400px) {
  html {
    font-size: 26.67px;
  }
}
@media (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media (min-width: 424px) {
  html {
    font-size: 28.27px;
  }
}
@media (min-width: 460px) {
  html {
    font-size: 30.67px;
  }
}
@media (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media (min-width: 750px) {
  html {
    font-size: 50px;
  }
}

js的rem布局的版本

   (function (doc, win) {
          var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
             recalc = function () {
                 var clientWidth = docEl.clientWidth;
                 if (!clientWidth) return;
                  if(clientWidth>=640){
                     docEl.style.fontSize = '100px';
                 }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                 }
             };
 
         if (!doc.addEventListener) return;
         win.addEventListener(resizeEvt, recalc, false);
         doc.addEventListener('DOMContentLoaded', recalc, false);
     })(document, window);
//如果我們一開始把html的font-size設(shè)為100px呢？此時1rem = 100px，那么上面的寬55px，高37px的元素樣式就可以這么設(shè)置 ↓
//width: 0.55rem;
//height: 0.37rem;
//是不是換算起來簡單多了？！
//（當(dāng)然可能有同學(xué)問，為什么不一開始把html的font-size設(shè)為1px呢，這樣換算起來也簡單，答：瀏覽器一般都有最小字體限制，比如谷歌瀏覽器，最小中文字體就是12px，所以實際上沒有辦法讓1rem=1px。）
//根據(jù)上面的js代碼，如果頁面寬度低于640px,那么頁面中html的font-size也會按照（當(dāng)前頁面寬度/640）的比例變化。這樣，頁面中凡是應(yīng)用了rem的作尺寸單位的元素都會隨著頁面變化而等比例縮放了！

補充移動端之調(diào)試工具

1. vConsole

第一種用法：引入js文件
資源鏈接

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
// 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

第二種用法：npm命令

先執(zhí)行命令 npm i vconsole
然后在文件中加入代碼，就可以打印日志了

import  VConsole  from  'vconsole';
let vConsole = new VConsole();
console.log("test");

是不是很方便！

同類產(chǎn)品 eruda

2. Charles

Charles 是一款強大的抓包工具，可以截取包括 https 在內(nèi)的各種網(wǎng)絡(luò)請求并方便的查看具體信息。有 Mac、Windows 和 Linux多版本，通過配置 WIFI 代理，也可以攔截手機發(fā)出的請求。畢竟前端相當(dāng)一部分報錯是網(wǎng)絡(luò)錯誤或數(shù)據(jù)不符合預(yù)期導(dǎo)致的（甩鍋后端??）。所以通過攔截 http 請求,查看具體的請求信息和數(shù)據(jù)，能獲取很多有用的信息，可以在一定程度上幫助 debug。但是該軟件是付費的（希望大家支持正版，要記住你也是一位開發(fā)），而且它定位不了 js 的報錯，所以只能作為一個輔助工具。