移動端使用meta標籤解決input獲取焦點放大頁面

移動端使用meta標籤解決input獲取焦點放大頁面

2018年03月31日 21:48:34 SPN_迪 閱讀數：1712

 版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/gala_1/article/details/79772677

在移動端使用的meta標籤裏，最常用，最重要的一個：

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

這裏面各項的含義：

width=device-width ，使你的頁面的寬度width，等於移動設配的寬度；

minimum-scale=1.0 ，maximum-scale=1.0 ,這兩個意思是最小和最大的縮放比是1；

user-scalable=no ，最重要的這個代表用戶是否可以對頁面進行縮放，yes爲可以，no爲不可以。一般我們將值都設爲no,如果允許用戶縮放，頁面的展示效果並不好。

使用這個meat標籤可以讓input在一般瀏覽器上不會放大頁面。

在使用meat標籤的同時，我一般配合js和css一起用：

 

js代碼爲：

1. window.onload=function(){

2.  

3. document.addEventListener('touchstart',function (event) {

4. if(event.touches.length>1){

5. event.preventDefault();

6. }

7. })

8. var lastTouchEnd=0;

9. document.addEventListener('touchend',function (event) {

10. var now=(new Date()).getTime();

11. if(now-lastTouchEnd<=300){

12. event.preventDefault();

13. }

14. lastTouchEnd=now;

15. },false)

16. }

根據查到的說法爲這是爲了在meat標籤失效時，通過js監聽touch事件，阻止縮放。

css代碼爲（沒有驗證）：

input,input:focus,input:active{user-select: text;-webkit-user-select:text;zoom：1}

css的作用是否起作用沒有驗證。