移動前端開發(fā)經(jīng)驗小結(jié)

baiy 發(fā)布于2019-08-02 11:09 / 1695人閱讀

摘要：一概要本文檔針對移動前端開發(fā)，包括里面的頁面，非應用。一個失敗的圓圓角在移動平臺上開發(fā)時，用畫一個圓很簡單，只需要一句代碼不過，在上，這個定義將會失效，而顯示為默認的矩形。

一、概要

本文檔針對移動前端開發(fā)，包括 Hybrid 里面的web頁面，非 Native 應用。

二、適用

所有經(jīng)驗適用于：iOS6.0+, Android4.0+

三、小結(jié)

<1>css偽類:active

如果你想使用元素的偽類來實現(xiàn) 按下激活狀態(tài)，那么你需要知道以下問題：

iOS上的幾乎任何瀏覽器，定義元素的偽類 :active 都是無效；

Android上，Android Browser 和 Chrome 都支持偽類 :active ，其它第三方瀏覽器有部分不支持；

定義了 :active 并且當前瀏覽器環(huán)境支持，當手指在滾動或者無意間的劃過時，:active 狀態(tài)都會被激活；

為了規(guī)避上述所有的問題，如果需要按下激活狀態(tài)，推薦使用 js 新增一個 className

<2>清除輸入框內(nèi)陰影

iOS上的幾乎任何瀏覽器輸入框（input, textarea）默認有內(nèi)部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關(guān)閉：

input,
textarea {
    /* 方法1: 去掉邊框 */
    border: 0;

    /* 方法2: 邊框色透明 */
    border-color: transparent;

    /* 方法3: 重置輸入框默認外觀 */
    -webkit-appearance: none;
    appearance: none;
}

<3>圓角Bug

手機在 Android Browser4.4.2 上（其他版本未測），如果你使用了 border-radius，并且使用了 -webkit-transform 屬性，當使用了 translatez 或者 translate3d 值，圓角會出現(xiàn)問題：

.test {
    border: 2px solid red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: gray;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    -webkit-transform: translate(0, 0) translatez(0);
    transform: translate(0, 0) translatez(0);
}

如上代碼，-webkit-transform: translate(0, 0) translatez(0) 將會導致圓角無法包裹住 background-color。

當然，-webkit-transform: translate3d(0, 0, 0) 也是一樣的，所以如果你的某個場景是這樣的，那么可以直接使用 -webkit-transform: translate(0, 0) 來避免這個問題

<4>邊框圓角致背景溢出

在紅米和OPPO等手機某些版本的 Android Webview 中，如果一個元素定義了 border + border-radius，這時如果該元素有背景，那么背景將會溢出圓角之外。

之所以會出現(xiàn)這個問題：其主要原因是因為CSS對背景裁剪（background-clip）有不同的處理方式，通常它可以是 border-box | padding-box | content-box 這3種方式。

瀏覽器的默認裁減方式是 border-box，即溢出 border 之外的背景都將被裁減。

對于上述無法裁減邊框之外背景的手機，將值定義為 padding-box | content-box 都能fix這問題，不過更推薦使用 padding-box。因為使用 content-box，如果定義了 padding 不為 0，背景將無法鋪滿元素。

<5>一個失敗的圓（圓角）

在移動平臺上開發(fā)時，用CSS畫一個圓很簡單，只需要一句代碼：

.circle {
    border-radius: 50%;
}

不過，在 Android Browser2.* 上，這個定義將會失效，而顯示為默認的矩形。

因為 Android Browser2. 不支持以百分比作為 border-radius 的值，所以如果你需要兼容 Android Browser2.，那么你可以這樣：

.circle {
    width: 10rem;
    height: 10rem;
    border-radius: 5rem;
}

如果你覺得這樣定義不夠靈活，想懶一點，那么其實可以給 border-radius 預設(shè)一個比較大的值，比如 100rem，用以避免當元素的尺寸變了，圓角半徑也得跟著變，除非元素的尺寸超出了你預設(shè)的閥值。

<6>禁止文本縮放

當移動設(shè)備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

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

<7>郵箱地址識別
在 Android （iOS不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串，不論有你沒有加上郵箱鏈接，當你在這個字符串上長按，會彈出發(fā)郵件的提示。

關(guān)閉郵箱地址識別：

開啟郵件發(fā)送：

dooyoe@gmail.com

<8>如何禁止保存或拷貝圖像
通常當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像或者拷貝圖像，如果你不想讓用戶這么操作，那么你可以通過以下方法來禁止：
img {

-webkit-touch-callout: none;

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

`.xxx {

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

}`
這個設(shè)置，在大部分機子上都是起效果的。但是，移動端三星自帶瀏覽器，點擊頁面任意a標簽時，設(shè)置-webkit-tap-highlight-color:rgba(0,0,0,0)還是會有陰影底色，這應該是瀏覽器強制加上去的，通過代碼設(shè)置也無法覆蓋。

有一種妥協(xié)的方法是把頁面非真實跳轉(zhuǎn)鏈接的a標簽換成其它標簽，可以解決這個問題。
<10>移動端禁止選中內(nèi)容
如果你不想用戶可以選中頁面中的內(nèi)容，那么你可以在css中禁掉：

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

就這么簡單，但是目前只支持webkit內(nèi)核的瀏覽器。
今天先找這些明天繼續(xù)；

云服務器 GPU云服務器前端開發(fā)經(jīng)驗前端移動開發(fā) 移動前端開發(fā) 移動前端開發(fā)教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/52797.html

發(fā)表評論

登陸后可評論

0條評論

baiy

男|高級講師

我要關(guān)注我要私信

TA的文章

虛擬主機怎么上傳文件-虛擬主機怎么上傳文件？

閱讀 912·2021-09-22 16:01
Contabo，新增NVME硬盤，加1歐可以升級 100G NVMe

閱讀 2175·2021-08-20 09:37
CSS小技巧（一）：iconfont的使用

閱讀 1765·2019-08-30 15:54
小程序?qū)崿F(xiàn)橫向滑塊，超過10個則出現(xiàn)查看更多

閱讀 1751·2019-08-30 15:44
文檔合集

閱讀 920·2019-08-28 18:23
JavaScript學習第十天筆記（繼承）

閱讀 3072·2019-08-26 12:17
Node.js child_process模塊解讀

閱讀 1103·2019-08-26 11:56
vue-cli中怎么基于axios去封裝方法

閱讀 1598·2019-08-23 16:20

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

移動前端開發(fā)經(jīng)驗小結(jié)

相關(guān)文章