移動(dòng)前端開(kāi)發(fā)經(jīng)驗(yàn)小結(jié)

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

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

一、概要

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

二、適用

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

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

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

iOS上的幾乎任何瀏覽器，定義元素的偽類(lèi) :active 都是無(wú)效；

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

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

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

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

iOS上的幾乎任何瀏覽器輸入框（input, textarea）默認(rèn)有內(nèi)部陰影，但無(wú)法使用 box-shadow 來(lái)清除，如果不需要陰影，可以這樣關(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 上（其他版本未測(cè)），如果你使用了 border-radius，并且使用了 -webkit-transform 屬性，當(dāng)使用了 translatez 或者 translate3d 值，圓角會(huì)出現(xiàn)問(wè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) 將會(huì)導(dǎo)致圓角無(wú)法包裹住 background-color。

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

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

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

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

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

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

<5>一個(gè)失敗的圓（圓角）

在移動(dòng)平臺(tái)上開(kāi)發(fā)時(shí)，用CSS畫(huà)一個(gè)圓很簡(jiǎn)單，只需要一句代碼：

.circle {
    border-radius: 50%;
}

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

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

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

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

<6>禁止文本縮放

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

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

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

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

開(kāi)啟郵件發(fā)送：

[email protected]

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

-webkit-touch-callout: none;

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

`.xxx {

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

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

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

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

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

GPU云服務(wù)器云服務(wù)器前端開(kāi)發(fā)經(jīng)驗(yàn) 前端移動(dòng)開(kāi)發(fā) 移動(dòng)前端開(kāi)發(fā) 移動(dòng)前端開(kāi)發(fā)教程

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113643.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Zoom

男|高級(jí)講師

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

TA的文章

【力扣】40. 組合總和 II

閱讀 2627·2021-11-12 10:36
PacificRack秋季促銷(xiāo)：洛杉磯VPS $18.00/年起，采用SSD硬盤(pán)，支持Linux/W

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

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

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

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

閱讀 2346·2019-08-29 16:40
移動(dòng)前端開(kāi)發(fā)經(jīng)驗(yàn)小結(jié)

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

移動(dòng)前端開(kāi)發(fā)經(jīng)驗(yàn)小結(jié)

相關(guān)文章