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

Zoom 發(fā)布于2019-08-29 16:17 / 1581人閱讀

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

一、概要

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

二、適用

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

三、小結(jié) <1>css偽類:active

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

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

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

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

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

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

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

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

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

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

<3>圓角Bug

手機(jī)在 Android Browser4.4.2 上（其他版本未測），如果你使用了 border-radius，并且使用了 -webkit-transform 屬性，當(dāng)使用了 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) 將會導(dǎo)致圓角無法包裹住 background-color。

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

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

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

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

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

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

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

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

.circle {
    border-radius: 50%;
}

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

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

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

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

<6>禁止文本縮放

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

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

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

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

開啟郵件發(fā)送：

dooyoe@gmail.com

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

-webkit-touch-callout: none;

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

`.xxx {

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

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

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

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

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

Zoom

男|高級講師

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

TA的文章

【力扣】40. 組合總和 II

閱讀 2618·2021-11-12 10:36
PacificRack秋季促銷：洛杉磯VPS $18.00/年起，采用SSD硬盤，支持Linux/W

閱讀 2257·2021-08-23 09:47
把富文本的 ? 轉(zhuǎn)為</br>標(biāo)簽

閱讀 1675·2019-08-30 15:44
前端iPhone X適配總結(jié)

閱讀 1400·2019-08-30 14:10
小白面試之制作一個本地個人信息網(wǎng)頁

閱讀 2241·2019-08-29 16:52
面向web前端及node開發(fā)人員的vim配置

閱讀 2333·2019-08-29 16:40
移動前端開發(fā)經(jīng)驗小結(jié)

閱讀 1582·2019-08-29 16:17
玩轉(zhuǎn)3D Swiper性感秀之思路分析總結(jié)

閱讀 2407·2019-08-26 13:21

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章