移動web開發中自己遇到的三個小題及解決方案

標籤：

 

大家好！

     這是我第二次寫隨筆感想，有不足之處希望大家提出，我也算的上一個小白，自己進入前端行業也剛剛半年，在這裡半年裡我遇到一個技術大牛的好領導，讓我在項目中學到很多，想和大家分享一下！ 

一. 移動端禁止選中內容

如果你不想使用者可以選中頁面中的內容，那麼你可以在css中禁掉：

.user-select-none {

  -webkit-user-select: none;  /* Chrome all / Safari all */

  -moz-user-select: none;     /* Firefox all （移動端不需要） */

  -ms-user-select: none;      /* IE 10+ */     

}

二. 移動端取消touch高亮效果

在做移動端頁面時，會發現所有a標籤在觸發點擊時或者所有設定了偽類 :active 的元素，預設都會在啟用狀態時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來進行全域的禁止：

html {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連結的a標籤換成其它標籤，可以解決這個問題。

三. 如何禁止儲存或拷貝映像（IOS）

通常當你在手機或者pad上長按映像 img ，會彈出選項儲存映像 或者拷貝映像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：

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

移動web開發中自己遇到的三個小題及解決方案