移動前端開發經驗小結

baiy 發布于2019-08-02 11:09 / 1634人閱讀

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

一、概要

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

二、適用

所有經驗適用于：iOS6.0+, Android4.0+

三、小結

<1>css偽類:active

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

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

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

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

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

<2>清除輸入框內陰影

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

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 值，圓角會出現問題：

.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，這時如果該元素有背景，那么背景將會溢出圓角之外。

之所以會出現這個問題：其主要原因是因為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>一個失敗的圓（圓角）

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

.circle {
    border-radius: 50%;
}

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

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

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

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

<6>禁止文本縮放

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

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

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

關閉郵箱地址識別：

開啟郵件發送：

dooyoe@gmail.com

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

-webkit-touch-callout: none;

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

`.xxx {

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

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

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

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

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

云服務器 GPU云服務器前端開發經驗前端移動開發移動前端開發移動前端開發教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52797.html

移動前端開發經驗小結

摘要：一概要本文檔針對移動前端開發，包括里面的頁面，非應用。一個失敗的圓圓角在移動平臺上開發時，用畫一個圓很簡單，只需要一句代碼不過，在上，這個定義將會失效，而顯示為默認的矩形。一、概要本文檔針對移動前端開發，包括 Hybrid 里面的web頁面，非 Native 應用。二、適用所有經驗適用于：iOS6.0+, Android4.0+ 三、小結 css偽類:active 如果你想使...

Zoom 2019-08-29 16:17 評論0 收藏0
2018.11.19秋招末第二波前端實習/校招小結

摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，vue技術棧時間背景大概是在11月9日準備...

suxier 2019-08-29 17:21 評論0 收藏0
2018.11.19秋招末第二波前端實習/校招小結

摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，vue技術棧時間背景大概是在11月9日準備...

canger 2019-08-26 13:25 評論0 收藏0
wap html5播放器和直播開發小結

摘要：此文已由作者吳家聯授權網易云社區發布。歡迎訪問網易云社區，了解更多網易技術產品運營經驗。播放器的設計思路重構后應該包含這些功能支持點播非加密的和直播播放兼容適配移動端根據平臺自動選擇使用還是。直播的一些特點直播狀態的判斷。此文已由作者吳家聯授權網易云社區發布。歡迎訪問網易云社區，了解更多網易技術產品運營經驗。去年年中的時候，借著產品改版的機會，將之前的h5播放器好好整理重構了一番...

Miyang 2019-06-28 11:01 評論0 收藏0